Separator
A visual divider between content or menu items.
When To Use
Use the Separator component when you need to:
- Create a visual divider between sections of content
- Separate items in a list or menu
- Establish visual hierarchy and organization
- Divide groups of related items
- Create subtle visual breaks in dense interfaces
Separators improve the readability and scanability of content by visually grouping and segmenting related elements.
Examples
Radix Primitives
An open-source UI component library.
Blog
Docs
Source
Horizontal (Default)
Item One
Item Two
Item Three
Vertical
Account
Settings
Messages
Profile
Section Divider
Recent Activity
Content goes here
OR
End of Section
Default
Thicker
Colored
Dashed
Gradient
Partial Width
33%
With Shadow
Props
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
Accessibility
The Separator component follows accessibility best practices:
- Properly uses the
role="separator"attribute when not decorative - Can be set as
decorative={false}when it's semantically meaningful - Maintains proper color contrast for better visibility
- Works with screen readers to indicate sections of content
- Can be visually styled while maintaining accessibility