When to Use
Example: section separation
- Separating distinct content sections within a page or panel
- Creating visual breaks between list items, form groups, or sidebar sections
- Using vertical orientation to divide inline elements such as toolbar actions
- Don't use Divider as a substitute for spacing — rely on margin/padding tokens instead
Usage Guidelines
DO
Use thin dividers for list items and medium dividers for independent content sections. Use in moderation
Don’t
Don't overuse dividers — whitespace can also serve as separation. Don't use dividers as pure decoration
DO
Keep divider colors consistent with the overall design system
Don’t
Don't attach interactive elements to dividers. Don't use dividers as a substitute for proper spacing (margin/padding)
Interaction Behavior
Divider is a purely presentational component with no interactive behavior.
Accessibility
| Requirement | Implementation |
|---|---|
| Semantic role | Use <hr> element or role="separator" |
| Vertical divider | Add aria-orientation="vertical" |
| Contrast | Divider color-to-background contrast ≥ 3:1 |
| Decorative | If used purely for visual decoration, add aria-hidden="true" |