Mushilu-San UI Stack
Arranges children in a row or column with a consistent gap.
Selector: mui-stack
import { Stack } from '@mushilu-san/ui/layout';Loading example…
Overview
direction sets the axis, gap sets the space between children in spacing steps, and align and justify set how items sit along each axis. wrap lets a row break onto new lines.
When to use
Spacing a list of fields, buttons or text in one direction. Aligning items in a row, such as a label and an action.
When not to use
Equal-width items in columns. Use a Grid. Use Grid instead.
Guidelines
Do
Use the same gap for related items throughout a page. Use wrapfor rows of tags or buttons that may not fit.
Don't
Do not nest stacks just to add spacing. Use one stack with a gap.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — |
Visual order from direction="row-reverse"orcolumn-reversedoes not change the tab order. Avoid reversing content that users read in sequence.
API
Stack
| Name | Type | Default | Description |
|---|---|---|---|
direction | 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'column' | Flex-direction of the stack's children. |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'stretch' | Cross-axis alignment (align-items). |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'start' | Main-axis alignment (justify-content). |
gap | number | 4 | Gap between children — a step on the spacing scale (--mui-space-{n}), e.g. 0, 1, 2, 4, 8… |
wrap | boolean | false | Whether children are allowed to wrap onto multiple lines. Accepts attribute presence, e.g. <… wrap>. |
CSS parts
::part(root)
Tokens
--mui-space-2--mui-space-4