Separator
View on StorybookStorybookVisually divides content sections. Supports horizontal and vertical orientations with automatic RTL adaptation.
Preview
Content above separator
Content below separator
Installation
Usage
Examples
Horizontal
Section One
First section content
Section Two
Second section content
Section Three
Third section content
Vertical
In Cards
User Profile
Manage your profile settings
Personal Information
Update your personal details
Account Settings
Manage your account preferences
Privacy & Security
Control your privacy settings
In Navigation
In Lists
- Dashboard
- Settings
- Profile
- Notifications
Custom Styling
Thicker Separator
Primary Color
Dashed Style
Gradient Style
Props
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator |
decorative | boolean | true | Whether the separator is purely decorative (not semantic) |
className | string | undefined | Additional CSS classes to apply |
The Separator component extends Radix UI's Separator primitive and accepts all standard HTML attributes
Accessibility
Decorative vs Semantic
The decorative prop determines how the separator is announced to screen readers
- •decorative={true} (default): Not announced by screen readers, purely visual
- •decorative={false}: Announced as a separator with semantic meaning
When to Use Semantic Separators
Use decorative={false} when the separator has semantic importance, such as dividing major sections of content. Use the default decorative mode for purely visual spacing
ARIA Role
When not decorative, the component automatically applies role="separator" and appropriate ARIA attributes based on orientation
RTL Considerations
Separators work identically in both LTR and RTL layouts. Horizontal separators span the full width, and vertical separators maintain their height regardless of text direction.
LTR (English)
RTL (العربية)
Use Cases
Section dividers in layouts
Menu item grouping
Card content separation
Toolbar and nav bar dividers