# Dividers & Spacers

`divider` and `spacer` are the only components with no content of their own. They exist to separate what is around them — one draws a line, the other reserves space. Both accept `props` and `children` and nothing else: no `content`, no `dataSource`, no `responsive`, no `visibility`, no `i18n`.

```yaml
components:
  - { type: text, tag: h2, content: 'Personal details' }
  - { type: spacer, props: { size: lg } }
  - { type: divider, props: { style: dashed, label: 'or' } }
  - { type: spacer, props: { size: lg } }
  - { type: text, tag: h2, content: 'Company details' }
```

## `divider`

A rule between sections, prestyled with the theme's border tone.

| Property          | Description                                                            |
| ----------------- | ---------------------------------------------------------------------- |
| `props.style`     | Line style: `solid` (default), `dashed`, or `dotted`.                  |
| `props.label`     | Text set into the middle of the rule.                                  |
| `props.className` | Tailwind classes, appended after the prestyle so they win the cascade. |

`style` is applied as an inline `border-style` rather than a class, so it is unaffected by the token cascade. Any value other than `dashed` or `dotted` falls back to `solid` — a typo produces a plain rule, not an error.

### Labelled dividers

Supplying `label` changes the markup. Instead of a bare `<hr>`, the divider becomes a flex container with `role="separator"` and `aria-label` set to the label, holding two rules with the text between them:

```yaml
- { type: divider, props: { label: 'or continue with', style: solid } }
```

The label renders in the muted foreground tone, so a labelled separator reads as passive chrome rather than as a heading. Because the accessible name comes from `aria-label`, assistive technology announces the separator once — it does not read the visible text a second time.

## `spacer`

Vertical whitespace, sized from a preset. Renders an `aria-hidden` element, so it adds rhythm without adding anything to the accessibility tree.

| `props.size` | Height   | Typical use                           |
| ------------ | -------- | ------------------------------------- |
| `sm`         | `0.5rem` | Between tightly related rows.         |
| `md`         | `1.5rem` | The default — between sibling blocks. |
| `lg`         | `3rem`   | Between subsections.                  |
| `xl`         | `5rem`   | Between major page sections.          |

An unrecognised `size` falls back to `md`. A `props.className` you supply is appended after the height class, so `className: 'h-40'` overrides the preset outright.

:::callout
**Prefer padding on the parent where you can.** A `spacer` is the right tool when the gap belongs between two siblings and neither owns it — a form section break, a landing-page rhythm beat. When one block owns the gap, put it on that block's `className` instead; there is less markup and it survives reordering.
:::

## Related Pages

- [Layout Components](/en/docs/layout-components) — the containers these sit between.
- [The Component Model](/en/docs/components-overview) — why these two accept so few modules.
- [Content Components](/en/docs/content-components) — the text they separate.
- [Theme](/en/docs/theme) — the border and muted tones the divider uses.