Divider

Example

Stars

View this in Storybook

Usage

When to use divider

• To signify a change in topic, content type, or expected interaction.
• To create visual separation between chunks of content. Divider can help users distinguish between blocks of similar content at-a-glance.

When to consider something else

• Short items in close proximity. Avoid using a divider between short, individual items that are close to one another, unless they separate navigation links. Consider using white space or headers instead to create vertical separation.
• Grouped interactive elements. Use a background color box or card to separate a chunk of interactive elements, like search controls, from a list of search results.

How this component works

The Divider component creates a horizontal rule between sections of content. Use it to separate distinct groups of information when spacing or headings alone don’t provide enough visual separation.

In most cases, dividers are decorative. If a divider communicates a meaningful change in topic or structure, don’t hide it from assistive technology.

Accessibility considerations

Decorative vs semantic dividers

Not all dividers should be announced to screen readers. Most dividers are decorative when used alongside headings or within well-structured content.

Use aria-hidden="true" for decorative dividers when:

• The divider only provides visual separation
• Content structure is already clear through headings or other markup

Do not use aria-hidden="true" for semantic dividers when:

• The divider marks a significant topic change meaningful to non-visual users
• The divider is the primary indicator of a content boundary

Provide feedback

Share your feedback, report issues, or suggest improvements for the Divider component. Your input helps us make the design system better for everyone.

• Get immediate support in #platform-design-system for technical or urgent issues.
• Explore all feedback channels for additional ways to share your input.