Content & Data
Divider
Divider is a thin separator line between content sections — horizontal or vertical, semantic or decorative.
Orientation (Horizontal/Vertical) — 2 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-13
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.5.0-beta
Known open questions
- Separator is a synonym — Divider is the established Figma name.
- Inset divider variants are not confirmed.
Live preview
Semantic, decorative, and vertical separators using token thickness.
Thematic horizontal (hr)
Overview
Implementation details
Decorative
Related links
Purely visual separation — not announced.
Vertical in layout
LeftRight
Purpose
A thin line separating distinct sections or groups of content.
Anatomy
Divider = 1px line using token thickness and color.
Variants and states
thematic · decorative · structural
When to use
Visually separating unrelated content blocks where spacing alone isn't a strong enough signal.
When not to use
Overusing dividers where consistent spacing already communicates separation.
Accessibility
Purely decorative — aria-hidden, or role="separator" only if it carries real structural meaning.
Common mistakes
Using a Divider as a substitute for proper spacing/grouping in layout.
Properties
Orientation as variants.
When should Divider use an hr element?
Use variant="thematic" (default) when the line represents a meaningful content break. Use decorative for purely visual separation.
Is a decorative Divider announced?
No — decorative dividers use aria-hidden and role="presentation".
What is the difference between Divider and spacing?
Whitespace groups related content. Divider signals a stronger break between distinct sections — do not replace layout spacing with dividers everywhere.
Why doesn't Figma have a variant for thematic/decorative/structural?
By design, not a gap — all three variant values render the identical CSS class (only the underlying element, role, and aria attributes differ), so there is nothing visually distinct for Figma to represent. Confirmed via direct Figma inspection 2026-07-15: the component set (2044:26035) intentionally has only the Orientation property.
Tokens used
semantic/border/default
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Confirmed Figma orientations. |
| variant | "thematic" | "decorative" | "structural" | "thematic" | Semantic mode: hr, hidden decorative, or role=separator. |
React example
Copy React example
import { Divider } from "@/components/ui/Divider";
export function Example() {
return (
<>
<p>Section one</p>
<Divider />
<p>Section two</p>
</>
);
}