# Divider
> Generated from divider.contract.json — do not edit by hand.

A thin rule that separates blocks of content — full-width, with a label, or a vertical hairline.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `orientation` | horizontal | vertical | `horizontal` | Horizontal rule or an inline vertical hairline |
| `align` | left | center | right | `center` | Where the slotted label sits along a horizontal rule |
| `dashed` | boolean | `false` | Render the rule as a dashed line |
| `plain` | boolean | `false` | Drop the label from heading emphasis (bold, text-default) to a quiet regular note (400, text-secondary) |

## Visual standard (measured)
- Rule: 1px solid, border #E3E3E3
- Label (heading): Plus Jakarta SemiBold 600, 13/22, text-default #1A1A1A
- Label (plain): `plain` → Regular 400, text-secondary #4A4A4A
- Align: label center (default) · left · right; the short leg becomes a 24px stub
- Gap: 12 between rule and label
- Vertical: 1px left hairline, 1em tall, 0 8 margin
- Dashed: `dashed` swaps the rule to a dashed border

## When to use
- **Divider** — separating stacked sections, list groups, or toolbar items
- **Space** — you only need consistent gaps, not a visible line
- **whitespace** — the separation reads clearly without any rule — prefer less chrome

A divider is quiet structure — keep it 1px and on the border token. Use a label only when the section genuinely needs naming; reach for whitespace before adding a rule.