Layout
Stack
Lays children out in a row or column with a consistent token-backed gap. The agnostic replacement for inline flex and gap styles.
Examples
Row with gap
Loading preview
<Stack direction="row" spacing="12px">...</Stack>API
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'row' | 'column' | column | Layout direction. |
spacing | SpacingScale | string | 0 | Gap between items. |
align | 'start' | 'center' | 'end' | 'stretch' | stretch | Cross-axis alignment. |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | start | Main-axis distribution. |
Guidelines
Do
- Use Stack for one-dimensional layouts instead of raw flexbox.
Avoid
- Do not hardcode gap with margins; use the spacing prop.