# Space
> Generated from space.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `size` | small | middle | large | number | `small` | Gap between items — named DS step (8/16/24) or a raw pixel number |
| `direction` | horizontal | vertical | `horizontal` | Lay items in a row or stack them |
| `align` | start | center | end | baseline | `center` | Cross-axis alignment (align-items) |
| `wrap` | boolean | `false` | Allow items to wrap onto multiple lines |
| `split` | boolean | `false` | Rule a thin --aha-split divider between adjacent items |

## Visual standard (measured)
- Display: inline-flex (row) · flex (vertical)
- Size scale: small 8 · middle 16 · large 24 (or a raw px number)
- Default: size small (8), row, items centred
- Align: start · center · end · baseline (align-items)
- Wrap: off by default; on lets a row flow onto multiple lines
- Split: 1px --aha-split #F1F1F1 rule between adjacent items (half-gap inset)

## When to use
- **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

Space is the lightweight spacer — no alignment gymnastics, just a consistent gap. Keep sizes on the named scale so inline spacing matches across surfaces. It is layout, never decoration: it paints no background.