Stack ready Storybook
Available from v10.2.3
Overview
The Stack component is a simple wrapper around the flexbox layout model that allows to easily create responsive and flexible layouts. It provides a simple and intuitive way to align and distribute items within a container either horizontally or vertically.
When to Use
- For creating responsive and flexible layouts that can adapt to different screen sizes and orientations.
- When needing a simple and intuitive way to align and distribute items within a container either horizontally or vertically.
- To easily reorder and rearrange elements without changing the HTML structure.
- When aiming to create equal-height columns.
- To create a grid-like structure with automatic wrapping and sizing of items based on the available space.
When not to Use
- For complex multi-dimensional layouts with intricate requirements that are better suited for CSS frameworks or grid systems.
- When precise control over spacing and positioning of elements is necessary.
Props
Display
There are 5 different props related to how the content is displayed:
direction
, with possible values:row
,row-reverse
,column
,column-reverse
wrap
, with possible values:nowrap
,wrap
,wrap-reverse
alignItems
, with possible values:stretch
,flex-start
,flex-end
,center
,baseline
,start
,end
,self-start
,self-end
justifyContent
, with possible values:flex-start
,flex-end
,center
,space-between
,space-around
,space-evenly
,start
,end
,left
,right
gap
, with possible values: ThemeSpacingTokens (0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10)
If you just need to create a Flex layout without any other styling to the box, please use the Stack component instead.
<Stack direction='row' wrap='wrap' alignItems='center' justifyContent='center' gap={5}> <span>One</span> <span>Two</span> <span>Three</span> </Stack>
Responsiveness
All of the above props can be defined in a responsive way, meaning that different values will be set depending on the window size.
To define any of them responsively, simply pass in an object with responsive breakpoints as keys. For instance, instead of defining direction in this way direction='row'
define it like direction={{ xs: 'column', md: 'row' }}
.
This means that from the xs
breakpoint up, direction is set to column
, while from the md
breakpoint up, it is set to row
.
The possible breakpoints in the theme can be found here.