Divider

Divider

A horizontal divider to segment content.

UsageAPI

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>

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.

Was this page useful?

Published: Jan 7, 2022Last updated: Sep 3, 2024

Use Divider...

Don't use Divider...

Props

Related