> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/containers/buttoncontainer.md).

# ButtonContainer

This component is used to place some buttons in one container

When you have some buttons in one place on the page it is better to wrap them into ButtonContainer component. This component provides a gap between buttons and also arranges them into a row or a column. 

```tsx
import { ButtonContainer, Role, Align } from 'altrone-ui';

return <ButtonContainer align={Align.center}>
    <Button>Reset</Button>
    <Button>Cancel</Button>
    <Button role={Role.primary}>Apply</Button>
</ButtonContainer>
```

## Properties

| Property                                              | Type                                                | Description                                                                                                                  |
| ----------------------------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | `ReactNode`                                         | Inner buttons                                                                                                                |
| **`direction`**                                       | [`Direction`](/altrone-ui/utils/enums/direction.md) | Direction of the container. Default value is `horizontal`                                                                    |
| **`align`**                                           | [`Align`](/altrone-ui/utils/enums/align.md)         | Alignment of the buttons. Default value is `start`                                                                           |
| **`mobileFluid`**                                     | `boolean`                                           | This property makes the `direction` as `vertical` and changes `width` of the buttons to `100%`. Works only on mobile devices |
| **`className`**                                       | `string`                                            | Custom CSS class                                                                                                             |

## History

* **`Altrone 1.0`**: initial release