Divider

Primary UI element for visually separating content

Renders a divider UI component: horizontal or vertical line that visually separates two pieces of data, content or UI.


Default Behaviour

The horizontal divider takes up the full available width and the vertical divider takes up the full available height.

The horizontal divider is rendered by default. Set vertical prop to true to change the divider orientation.


Divider vs Border

The default color of Divider is $border.primary (#C6CDD4), however...

Divider is NOT a border, and should not be used as such. Please do not use this component as a border for elements.

Divider is naturally expected to have a certain offset from the elements it is 'dividing' or separating.


Style Props

The Divider has the following design props:

  • offset - set the divider offset from the content it is separating (uses mx, my styled system props)

Usage

Horizontal (with default offset)

Element 1
Element 2
<Divider />

Horizontal (without offset)

Element 1
Element 2
<Divider offset={0} />

Vertical (with default offset)

Element 1
Element 2
<Divider vertical />

Vertical (without offset)

Element 1
Element 2
<Divider vertical />

Playground

Section 1
Section 2
Section 1
Section 2