Best Practices

When to Use

Dividers work best when separating distinct groups of content in lists, menus, or sections. They help users scan and understand the structure of complex interfaces.

Use Sparingly

Avoid overusing dividers. Too many lines can create visual clutter. Consider using whitespace, different background colors, or typography to create separation instead.

Vertical Dividers for Toolbars

Use vertical dividers to separate groups of actions in toolbars or icon groups. The flexItem prop ensures proper height alignment.

Accessibility

By default, Divider renders as an <hr> element with an implicit ARIA role of separator. Screen readers will announce it as "Horizontal Splitter" (or vertical when using orientation="vertical").

Decorative Dividers

If the divider is purely decorative, add aria-hidden="true" to prevent screen readers from announcing it.

Dividers with Content

When wrapping content like text or chips, set component="div" and role="presentation" to maintain proper semantics.

Common Patterns

List Separators

When using dividers in lists, set component="li" to ensure valid HTML structure.

Section Headers

Use dividers with text to create subtle section headers:

Responsive Behavior

Consider how dividers appear on different screen sizes. Vertical dividers in horizontal layouts may need to switch to horizontal dividers on smaller screens.

Do's and Don'ts

Do's

• Use dividers to separate distinct groups of related content
• Combine with appropriate spacing for better visual rhythm
• Use variant="middle" or variant="inset" to reduce visual weight
• Set proper ARIA attributes for accessibility

Don'ts

• Use dividers as the only method of creating separation
• Overuse dividers—they can create visual noise
• Rely on dividers to convey interactive functionality
• Use dividers for decorative purposes without hiding them from screen readers