Default
Account details
Billing
Show the codeHide the code
Default, code
<div className="flex max-w-md flex-col gap-stack-md text-body-md text-fg"><p>Account details</p><Divider /><p>Billing</p></div>Divider
A 1px line between content; decorative unless it separates groups.
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Separator
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
With a label
or
Show the codeHide the code
With a label, code
<div className="max-w-md"><Divider label="or" /></div>Separates groups
Workspace
Personal
Show the codeHide the code
Separates groups, code
<div className="flex max-w-md flex-col gap-stack-md text-body-md text-fg"><p>Workspace</p><Divider decorative={false} /><p>Personal</p></div>Vertical
EditShare
Show the codeHide the code
Vertical, code
<div className="flex h-10 items-center gap-gap-md text-body-md text-fg"><span>Edit</span><Divider orientation="vertical" /><span>Share</span></div>Tokens
The 3 design tokens Divider reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 3 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.border.default | … | --sd-color-border-default |
| color.text.secondary | … | --sd-color-text-secondary |
| spacing.gap.md | … | --sd-spacing-gap-md |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Divider } from "@superduperui/react"Props
Divider also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
label | string | Optional text in the middle ("or"). Only for horizontal dividers. |
decorative | booleanDefault true | true (default): purely visual, hidden from screen readers. false: a real separator between groups of content (role="separator"), announced. |
orientation | unknownDefault 'horizontal' |
When to use it
Use it for
- Between sections of a form or menu
- "or" between two sign-in methods (label)
Use something else for
- Spacing alone does the job: use spacing tokens
Accessibility
Screen readers announce Decorative: nothing. Semantic: "separator".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.3.2.
Not interactive: density changes spacing only.
What your product still has to do
- Use decorative={false} only when the line separates groups that matter
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 100 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 85 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 0 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 0 focus stops in 0 browser engines: all pass |
Manual passes with VoiceOver and NVDA haven’t been done yet.
In Figma
The Figma component is Divider, with Orientation (Horizontal, Vertical). The Figma library isn’t published yet.
Figma to code: Orientation → orientation (Horizontal = "horizontal", Vertical = "vertical"); Label → label when Show label.