Divider

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

Divider

This component is implemented using the <hr /> as the root element. You can utilize the native attributes supported by <hr /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

Use Divider...

Don't use Divider...

Accessibility

Props

Related