## Space
An even, DS-scale gap between a small inline set of items — buttons, tags, inline controls.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-space> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- size: small | middle | large | number, default small. Gap between items — named DS step (8/16/24) or a raw pixel number
- direction: horizontal | vertical, default horizontal. Lay items in a row or stack them
- align: start | center | end | baseline, default center. Cross-axis alignment (align-items)
- wrap: boolean, default false. Allow items to wrap onto multiple lines
- split: boolean, default false. Rule a thin --aha-split divider between adjacent items
Tokens: text-default, split.
Use when: Space (spacing a small inline set of items evenly — buttons in a toolbar, tags in a row); Flex (you need alignment/justification control over a block-level layout); Grid (the items belong in two-dimensional rows and columns).