Divider
Divider is a simple component for visually separating content. It supports both horizontal and vertical orientations and can display a label inline.
3
Variants
4
Spacing
Label
With Label
Radix
Base
Playground
Preview
H
Content above the divider
Content below the divider
Variant
Color
Spacing
Direction
Label
<Divider />Variants
solidSolidDefault solid line — ideal for general content separation.
dashedDashedDashed style — conveys a lighter or draft-state separation.
dottedDottedDotted style — the most subtle form of separation.
Spacing
smMargin8px
Above
Below
mdMargin12px
Above
Below
defaultMargin16px
Above
Below
lgMargin32px
Above
Below
| Size | Margin | Usage | Preview |
|---|---|---|---|
sm | 8px | Between tightly packed elements | Above Below |
md | 12px | Compact separation | Above Below |
default | 16px | Standard separation | Above Below |
lg | 32px | Large gap between sections | Above Below |
API
Props
orientation"horizontal""horizontal" | "vertical"Orientation of the divider
variant"solid""solid" | "dashed" | "dotted"Line style
color"default""default" | "muted" | "strong"Line color intensity
spacing"default""sm" | "md" | "default" | "lg"Spacing around the divider
labelundefinedReactNodeContent displayed on the divider (horizontal only)
labelPosition"center""left" | "center" | "right"Position of the label
decorativetruebooleanDecorative separator — role="none" when true
| Name | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Orientation of the divider |
variant | "solid" | "dashed" | "dotted" | "solid" | Line style |
color | "default" | "muted" | "strong" | "default" | Line color intensity |
spacing | "sm" | "md" | "default" | "lg" | "default" | Spacing around the divider |
label | ReactNode | undefined | Content displayed on the divider (horizontal only) |
labelPosition | "left" | "center" | "right" | "center" | Position of the label |
decorative | boolean | true | Decorative separator — role="none" when true |
Anatomy
1
With label
2
3
ORPlain
4
Default margin
16pxBorder
1pxLabel padding
12px1
Root
Line container
2
Line
1px border
3
Label
Center text (optional)
Best Practices
✓
Recommended
- ✓Use to separate related content groups
- ✓Use a labeled Divider to clarify section meaning
- ✓Use vertical orientation for nav items and toolbars
- ✓Vary color to match the content hierarchy
✕
Don't
- ✗Don't overuse Dividers — it clutters the layout
- ✗Don't use Divider alone to add spacing — use the spacing prop
- ✗Don't use Divider as purely decorative noise
- ✗Don't mix different variants within the same section
Accessibility
Keyboard
Divider is decorative and not included in keyboard navigation — it does not receive focus.
ARIA / WCAG
- role="none" for decorative Divider (decorative=true)
- role="separator" for a semantic separator (decorative=false)
- aria-orientation set automatically
- Follows Radix Separator Primitive