Stack
Stack is a layout component that creates responsive horizontal and vertical flows.
React examples
Default
<Stack> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> </Stack>
Horizontal flow
<Stack direction="horizontal"> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> </Stack>
Custom gap between items
This example uses the 'condensed' gap variant.
<Stack gap="spacious"> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> </Stack>
Custom alignment
This example uses the 'center' alignment variant.
<Stack align="center" direction="horizontal"> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '1em', width: '1em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '1em', width: '1em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> </Stack>
Custom justification
This example uses the 'space-between' justification variant.
<Stack justify="space-between" direction="horizontal"> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> </Stack>
Custom padding
This example uses the 'spacious' padding variant.
<Stack padding="spacious"> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> </Stack>
Shrink and grow items
<Stack direction="horizontal"> <Stack.Item> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> </Stack.Item> <Stack.Item grow> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em'}} /> </Stack.Item> </Stack>
Wrapping items
<Stack wrap="wrap" direction="horizontal"> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> <Box sx={{backgroundColor: 'var(--bgColor-muted)', height: '2em', width: '2em'}} /> </Stack>
More examples
See the Stack component's "Playground" stories to demo the responsive behavior of the Stack component.
Props
Loading data for stack...