- Guidelines
- React API Reference
Separators are visual dividers that help organize content by creating clear distinctions between different sections or elements. They can be horizontal lines that divide content vertically or vertical lines that separate content horizontally, improving readability and visual hierarchy.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use separators to create visual breaks between content sections, list items, or navigation elements. |
| Content | Separators can be purely decorative or include text labels to provide context about the division. |
| Behavior | Separators are static elements that don’t require user interaction but help guide the eye through content. |
| Orientation | Choose horizontal for vertical content division and vertical for horizontal content separation. |
| Hierarchy | Use separators to establish clear content boundaries and improve information architecture. |
| Examples | Section dividers, navigation item separators, content blocks, or form field groups. |
Best Practices
- Spacing: Ensure adequate spacing around separators to create clear visual breaks without overwhelming the content.
- Consistency: Use separators consistently throughout your interface to maintain visual harmony.
- Contrast: Ensure separators have appropriate contrast against the background while not being too prominent.
- Text Labels: When using text with separators, keep labels concise and meaningful.
Do’s and Don’ts
Do
- Use separators to create clear content divisions.
- Choose appropriate orientation based on content flow.
- Maintain consistent spacing and styling throughout.
Don't
- Overuse separators in dense content areas.
- Use separators when whitespace alone would suffice.
- Make separators too prominent or distracting.
Additional Guidance
- Accessibility: Separators should be marked as decorative when they don’t convey semantic meaning, or properly labeled when they do provide semantic structure.
-
Psychological Impact:
- Visual Organization: Separators help users mentally organize and process information more effectively.
- Hierarchy Establishment: They create clear boundaries that help establish information hierarchy.
- Cognitive Load Reduction: By organizing content into distinct sections, separators reduce mental effort required to parse information.