Separator
A visual divider between content areas.
Overview
The Separator component creates a visual divider between content areas. It can be used horizontally or vertically to create clear visual separation between UI elements, improving readability and organization.
Examples
Basic Separator
Radix Primitives
An open-source UI component library.
Custom Styled Separator
Customize the appearance of separators with different colors.
Account Settings
Manage your account settings and preferences.
Messages
View and manage your messages.
Notifications
Configure your notification preferences.
Decorative Separator
Use separators as decorative elements in your UI.
Profile
Settings
Messages
API Reference
The Separator component provides a simple way to create visual dividers.
| Component | Props | Description |
|---|---|---|
| Separator | orientation?: "horizontal" | "vertical" decorative?: boolean className?: string | A visual divider that separates content. The default orientation is horizontal. |
The Separator component accepts standard HTML attributes in addition to the props listed above.
Usage Guidelines
Follow these guidelines for effective use of the Separator component:
Layout and Structure
Do
- Use consistent spacing before and after separators
- Align vertical separators properly with surrounding content
- Use separators to create clear visual hierarchy in your layout
- Consider using separators to group related content sections
- Ensure separators have sufficient contrast with the background
Don't
- Place separators too close to content, making the layout feel cramped
- Use separators inconsistently throughout your interface
- Add separators between every element, creating visual noise
- Use vertical separators in spaces that are too narrow
- Rely solely on separators for layout structure without proper spacing
Content Organization
Do
- Use separators to distinguish between different content sections
- Apply separators consistently for similar content patterns
- Consider using styled separators to indicate content importance
- Use horizontal separators for major section breaks
- Use vertical separators for inline content that belongs together
Don't
- Use separators between logically connected content that should appear unified
- Add separators when whitespace alone would provide sufficient distinction
- Use separators with high-contrast colors that draw too much attention
- Place separators between items in a single form or input group
- Use different separator styles inconsistently for the same content patterns
Accessibility
The Separator component is designed with accessibility in mind.
ARIA Role
The separator uses the appropriate role="separator" to ensure screen readers understand its purpose.
Decorative Option
When used purely for visual styling, you can set decorative= to make it invisible to screen readers.
Accessibility Tip
When using vertical separators, ensure there's enough spacing around them to maintain readability and that they have sufficient contrast with the background.