Divider

Component Status

Design Usage

A Divider is a simple visual element that separates content, sections, or groups. It provides structure and improves readability by creating clear boundaries within layouts.

---

When to Use

• To separate sections of content within a page or card.
• To group related items in lists or menus.
• To create a visual break between components for better scannability.
• As a subtle layout tool when spacing alone isn’t enough to show separation.

---

When Not to Use

• To create large visual gaps – use spacing utilities or layout components (Stack) instead.
• For hierarchical separation (e.g., page-level navigation) – use Headings, Sections, or Navigation.
• As a primary visual element – Divider should be subtle and supportive.
• To decorate content – Divider has a structural, not an ornamental purpose.

---

Best Practices

• Use Dividers sparingly – too many reduce clarity instead of improving it.
• Align Dividers with surrounding content (full width or inset, depending on context).
• Maintain consistent thickness and color across the design system.
• Ensure Dividers adapt well to dark/light themes.
• Pair with spacing to enhance clarity – Divider alone should not feel cramped.