Divider

A horizontal divider to segment content.

UsageGuidelinesAPI

Use Divider...

To vertically separate linear content into sections clearly when clarity and distinction between elements are needed.

Don't use Divider...

If it creates visual clutter as it can negatively impact readability.
If other visual cues already provide sufficient differentiation between content.

ReactVanilla

<Divider />

<Divider />

<hr class="swan-divider" />

<hr class="swan-divider" />

ReactVanilla

<>
  <Box>Some content above the divider</Box>
  <Divider my={4} />
  <Box>Some content below the divider</Box>
</>

<>
  <Box>Some content above the divider</Box>
  <Divider my={4} />
  <Box>Some content below the divider</Box>
</>

<div>
  Some content above the divider
  <hr class="swan-divider swan-my-4" />
  Some content below the divider
</div>

<div>
  Some content above the divider
  <hr class="swan-divider swan-my-4" />
  Some content below the divider
</div>

Accessibility

The component is built using the <hr> element, which has a semantic function as a separator and is announced as "separator" by screen readers.

If the component is used purely for decorative purposes, this can be repetitive and distracting for assistive technology users.

To prevent this, add role="presentation" to the <hr> element to hide it from screen readers:

<Divider role="presentation" />

<Divider role="presentation" />

Use this only when the component is purely decorative and does not convey a meaningful separation between sections.

Props

See core props for additional props that can be applied to each of these components. Each component also accepts the React-equivalent native HTML attributes of the element it renders, unless a listed prop replaces one or a note says otherwise.

Divider

Renders <hr>. No props beyond core props and native HTML attributes.

Pipe Separator

Divider

Use Divider...

Don't use Divider...

Accessibility

Props

Related