string
Divider
Dividers are used to visually separate content in a list or group.
Dividers are used to visually separate content in a list or group.
Import#
import { Divider } from '@saas-ui/react'
Usage#
The Divider
displays a thin horizontal or vertical line, and renders a hr
tag.
<Divider />
Label#
You can add a text label that will be aligned in the center of the Divider
,
this will render a div
tag.
<Divider label="Divider" />
Divider Orientation#
Pass the orientation
prop and set it to either horizontal
or vertical
.
<Divider orientation="horizontal" />
If the vertical orientation is used, make sure that the parent element is assigned a height.
<Center height="50px"><Divider orientation="vertical" /></Center>
<Center height="100px"><Divider orientation="vertical" label="Divider" /></Center>
Composition#
<Stack direction="row" h="100px" p={4}><Divider orientation="vertical" /><Text>Saas UI</Text></Stack>
Props#
label
label
Type
Was this helpful?