Divider

A divider is a line or any sort of element that seperates different content.

Horizontal Dividers

Dividers are horizontal by default.

Content before

Content after

Horizontal dividers offer an alternative style. You can achieve a dotted version of divider with the use of the dotted property.

Content before

Content after

You can also render a divider vertically using the vertical prop. Note that the parent of the vertical divider should be a flex container.

Content before

Content after

Learn more about the properties and the customization points.

import Divider from "@sonnat/ui/Divider";

//or
import { Divider } from "@sonnat/ui";

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Divider Properties
Name	Type	Default	Description
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
spaced	boolean	false	If `true`, the divider will have spaces around it.
dotted	boolean	false	If `true`, the divider will be rendered as 3-dots instead of a straight line. You can't use it along with `vertical`!
vertical	boolean	false	If `true`, the divider will be vertical. It only works in flexboxes! (the parent should be a flex container)
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.