## Divider
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.
Default to the HTML snippet — <aha-divider> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- orientation: horizontal | vertical, default horizontal. Horizontal rule or an inline vertical hairline
- align: left | center | right, default center. Where the slotted label sits along a horizontal rule
- dashed: boolean, default false. Render the rule as a dashed line
- plain: boolean, default false. Drop the label from heading emphasis (bold, text-default) to a quiet regular note (400, text-secondary)
Tokens: border, split, text-default, text-secondary.
Use when: 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).