Components
Stack
Lay out children in one direction with a gap.
Stack arranges its children in a row or a column with even spacing. Use it instead of a flex
Box. It is a Server Component and always uses the CSS gap property.
import Stack from '@hone-ui/react/Stack';Examples
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
<Button variant="outlined">One</Button>
<Button variant="outlined">Two</Button>
</Stack>Spacing and direction take a value per breakpoint, and divider goes between items:
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={{ xs: 1, sm: 3 }}>
...
</Stack>
<Stack divider={<Box component="hr" sx={{ width: '100%', m: 0 }} />} spacing={2}>
...
</Stack>Responsive values use the default breakpoints (sm 600, md 900, lg 1200, xl 1536) and carry up
to larger ones. { xs: 'column', md: 'row' } is a column below 900px and a row from 900px.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'row', 'row-reverse', 'column', 'column-reverse', or a breakpoint object or array | 'column' | The main axis. |
spacing | number, CSS length, or a breakpoint object or array | 0 | The gap. A number multiplies the theme spacing. |
divider | ReactNode | none | Rendered between each pair of children. |
useFlexGap | boolean | ignored | Accepted for compatibility. Stack always uses gap. |
component | ElementType | 'div' | The element to render. |
sx, className, style, ref, children | Standard. |
Notes
- System props such as
alignItemsdo not work. Usesx. - Stack keeps the default breakpoints (xs to xl), whatever names
createThemeand the@hone-ui/sxplugin use. - A component that returns a Fragment counts as one child, so
dividerskips its inner parts. - Stack does not read
components.Stack.defaultProps.
Accessibility
Stack adds no semantics. Use component="ul" with li children for lists.