> 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

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