Divider

Divider

A horizontal divider to segment content.

UsageGuidelinesAPI

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

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.