Legacy Stack
This is the legacy version of the Stack component which is in the process of being updated to a more flexible and composable API. Use to lay out a horizontal row of components or to achieve no-fuss vertical centering. A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the wrapping, spacing, and relative size of the items in the stack.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Best practices
Stacks should:
- Be used for small-scale layout tasks when you want a row of components that should wrap on small screen widths
- Be used to vertically center two elements
- Not be used for complex or unique arrangements of components
- Not be used for large-scale page layout
Stack item
The stack component will treat multiple elements wrapped in a stack item component as one item. By default, each individual element is treated as one stack item. Use the fill prop on a single stack item component to make it fill the rest of the available horizontal space. See the “Stack where a single item fills the remaining space” example.
Stack item properties
| Prop | Type | Description | Default |
|---|---|---|---|
| fill | boolean | Fill the available horizontal space in the stack with the item | false |
| children | any | Elements to display inside stack item |
Related components
- To create the large-scale structure of pages, use the layout component
Accessibility
The stack component is for alignment only and doesn’t provide any structural information for assistive technologies. To convey relationships between specific items, consider using the list component.