Mushilu-San UI Spacer
An empty element that adds a fixed gap or fills the free space in a flex row.
Selector: mui-spacer
import { Spacer } from '@mushilu-san/ui/layout';Loading example…
Overview
size to a spacing step for a fixed gap. Without size, it grows to fill the free space, which pushes items apart inside a row.
When to use
Pushing one item to the far end of a row, such as an action at the right edge. A fixed gap between two items where a Stack gap is not enough.
When not to use
Spacing between every item in a list. Use the gap of a Stack. Use Stack instead.
Guidelines
Do
Use a Stack gap for regular spacing and a Spacer for one-off placement.
Don't
Do not use spacers to create empty paragraphs. Use margins or Typography.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — | aria-hidden="true". It is not announced. |
Spacers have no content, so they do not affect the accessible name or reading order.
API
Spacer
| Name | Type | Default | Description |
|---|---|---|---|
size | number | undefined | undefined | Fixed size — a step on the spacing scale (--mui-space-{n}). When omitted, the spacer grows to fill available space (`flex: 1 1 0%`) — the common "push items apart" pattern inside a Stack/flex row. |
CSS parts
::part(root)
Tokens
--mui-space-1