Divider

A vertical or horizontal line that separates or groups content in lists and layouts.

Installation

import { Divider } from "@octopusdeploy/design-system-components"

Properties

Accessibility

We have set aria-hidden="true" on the Divider by default as the vast majority of our divider usage is purely decorative - this prevents it from being announced by screen readers.

If the Divider is used to indicate a meaningful separation, such as grouping related content, steps, or sections, make sure it remains accessible by setting ariaHidden prop to false.

If you’re unsure about the intent or purpose of a Divider in a particular layout, please reach out to your designer for clarification to ensure the correct accessibility behavior.

Tip: Screen readers will announce a divider as something like “Horizontal Splitter” or “Vertical Splitter,” (e.g. Voiceover on Mac, but it can vary between screen readers) so consider whether that announcement enhances or distracts from the experience.