Divider

Visual separator between sections (horizontal or vertical).

Status: stable. Group: structure. Markdown version: /design-system/components/divider.md

When to use

Divider draws a rule on the production border tokens. By default it is decorative; role="none", invisible to assistive tech; which is right when it only supports visual rhythm. Set decorative={false} when the rule conveys real structure (menu groups, toolbar clusters) so AT users get the same grouping. Vertical dividers need a height from their flex row.

When not to use

Do not use a divider as spacing; reach for gap or Spacer when you only need distance.
Do not put a divider between every list row; List's own rhythm and borders handle that.
Do not use dividers as spacing; if you only need distance, use gap or Spacer.

Look-alikes

Spacer: Do not use dividers as spacing; if you only need distance, use gap or Spacer.

Props

Divider props
Prop	Type	Default	Description	Required
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Horizontal rule or vertical separator.	No
`decorative`	`boolean`	`true`	When true, removed from accessibility tree (purely visual)	No
`className`	`string`	none	Optional spacing token class; use margin utilities on className.	No

Variants

Available orientations: horizontal, vertical (default horizontal).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

Divider rules
Level	Rule	How it is checked
MUST	ARIA: Decorative (the default) renders <hr role="none"> so assistive tech skips it.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Decorative={false} renders role="separator" with aria-orientation matching the orientation prop.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
SHOULD	Keep the decorative default when the rule is visual rhythm only.	Not stated in the contract.
SHOULD	Set decorative={false} where the split carries meaning (menu groups) so the separator role is announced.	Not stated in the contract.
SHOULD	Give vertical dividers a height via the parent row (align-self stretch or explicit class).	Not stated in the contract.
SHOULD	Space it with the parent's gap or margin utilities on className, not wrapper divs.	Not stated in the contract.
SHOULD NOT	Do not put a divider between every list row; List's own rhythm and borders handle that.	Not stated in the contract.

Install and import

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { Divider } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/layout exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.
Also available as the custom element <dt-divider>; see the custom elements manifest.