Divider
A visual separator that creates clear boundaries between content sections. Can be horizontal or vertical.
Horizontal Divider (Default)
Content above the divider
Content below the divider
Vertical Divider
Left
Middle
Right
Middle
Right
Spacing Variations
No spacing
Content
Small spacing
Content
Large spacing
Content
Props
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the divider |
spacing | 'none' | 'sm' | 'md' | 'lg' | 'md' | Margin around the divider |
className | string | - | Additional CSS classes |
Usage Guidelines
When to use
- •To separate content sections within a page
- •To visually group related items in lists
- •To create visual breaks in forms
- •In toolbars to separate action groups
Best practices
- •Use horizontal dividers for vertical content flow
- •Use vertical dividers in horizontal layouts (toolbars, breadcrumbs)
- •Match spacing to the content density
- •Consider using whitespace instead for subtle separation
Accessibility
- •Dividers are purely decorative and ignored by screen readers
- •Use semantic HTML (headings, sections) for structural separation
- •Ensure sufficient color contrast for the divider line
Do's and Don'ts
✓ Do
- •Use dividers to separate distinct content sections
- •Choose appropriate spacing based on content density
- •Use vertical dividers in horizontal toolbars
Section 1
Content for first section
Section 2
Content for second section
✗ Don't
- •Overuse dividers - creates visual clutter
- •Use dividers between every list item
- •Rely on dividers alone for content structure
Item 1
Item 2
Item 3
Item 4
Related Components
Card
Container component that creates visual boundaries
Stack
Layout component for arranging content with spacing
Breadcrumb
Navigation component that uses vertical dividers