Data Display
Divider
Divider is a thin line that groups content in lists and containers. It helps in improving content organization by separating content visually, making it easier for users to scan and understand information.
Examples
Content above divider
Content below divider
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Semantic <hr> element for horizontal dividers
- role="separator" for vertical dividers
- aria-orientation attribute on vertical dividers
- Does not interfere with screen readers
- Purely decorative/visual element
When to use this component
✓Do's
- •Use solid dividers to separate major content sections
- •Use dashed type dividers for softer visual grouping within a section
- •Use Dividers to Break long forms into logical sections
- •Adding subtle separation between adjacent UI elements
✗Don'ts
- •Spacing alone would create adequate separation, use Spacer
- •Don't use dividers between every list item, use Card or List with built-in separators
- •You need a decorative or branded separator, use custom styling
Do's and Don'ts
✓ Do's
Use dividers sparingly to group related content sections.
✗ Don'ts
Don't stack multiple dividers, it creates visual noise and reduces their separating effect.