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.

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

divider

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

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:

- { 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.

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.

Related Pages

• Layout Components — the containers these sit between.
• The Component Model — why these two accept so few modules.
• Content Components — the text they separate.
• Theme — the border and muted tones the divider uses.