Skip to main content

Components

Divider

Divider is used to create a visual separation between content. It is a simple horizontal line that spans the available width.

We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.

Divider is a purely visual element, and it is not announced by screen readers.

However, avoid using a Divider solely for visual effect without functional meaning. A Divider represents a thematic separation of content. To communicate this separation in an accessible way, you must also use elements that a screen reader can interpret. This can include a Heading, a List, <section> elements, or elements with role="group".

Use the component to mark a boundary between content that is not logically connected, such as different sections in an article or different functional areas on a page. Use it to visually clarify the structure, not simply to fill empty space or “decorate” the page.

Edit this page on github.com (opens in a new tab)