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