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.
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.
The Divider has the following design props:
- offset - set the divider offset from the content it is separating (uses mx, my styled system props)