Separator
Data Display
Visual divider with orientation, spacing, and label insertion for content segmentation
Variants
Solid
Dashed
Dotted
Gradient
Glass
With Labels
Center Label
OR
Left Label
Section Start
Right Label
Section End
Decorative
Continue Reading
Thickness
Thin
Medium
Thick
Spacing
Content above
Extra Small Spacing (xs)
Small Spacing (sm)
Medium Spacing (md)
Large Spacing (lg)
Extra Large Spacing (xl)
Vertical Orientation
Section 1
Section 2
Section 3
Section 4
Vertical with Label
Before
Content
OR
After
Content
Contextual Usage
Sign In
Enter your credentials to continue
OR
Usage Guidelines
When to Use
- Content sections
- Menu dividers
- Form sections
Accessibility
- Decorative separator role
- Text labels accessible
Performance
- CSS-only
- Single DOM element
Common Mistakes
- Using for spacing (use margin)
- Separator as only content divider
Frequently Asked Questions
Separator is a visual divider for content segmentation with optional text labels.
Yes, Separator can include text like 'or' between sections.
Related Components
View allAccordion
Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
Avatar
User avatar with image loading, fallback text generation, status indicators, and shape variants
AvatarGroup
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Badge
Status indicator with variant system, dot mode, positioning, and pulsing animation support