Container
The Container component provides a simplified interface for managing layout using CSS flex properties.
API
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | callback | Called when container is clicked | |
direction | row column row-reverse column-reverse | row | The primary axis to use when laying out children elements. Corresponds to the css property flex-direction (opens in a new tab) |
justify | center start end flex-start flex-end left right | left | How to space children elements on the primary axis. Corresponds to the css property justify-content (opens in a new tab) |
align | center start end flex-start flex-end self-start self-end | start | How to space children elements on the secondary axis. Corresponds to the css property align-items (opens in a new tab) |
gap | none xs sm md lg xl xxl xxxl | md | Spacing between each child element inside the container |
padding | none xs sm md lg xl xxl xxxl | md | Padding between button border and content, and between button text and icons |
paddingHor | none xs sm md lg xl xxl xxxl | md | Padding on left and right |
paddingVer | none xs sm md lg xl xxl xxxl | md | Padding on top and bottom |
paddingTop | none xs sm md lg xl xxl xxxl | md | Padding on top |
paddingRgt | none xs sm md lg xl xxl xxxl | md | Padding on right |
paddingBot | none xs sm md lg xl xxl xxxl | md | Padding on bottom |
paddingLft | none xs sm md lg xl xxl xxxl | md | Padding on left |
children | String | The label of the button. If empty, button assumes a square aspect ratio (icon-only) | |
style | Object | Custom css styles that are applied to the container. Uses React inline styling (opens in a new tab) |