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.
Source
Theme source
@saas-ui/core
- 2.8.9 (latest)
Import
import { Divider, DividerLabel } from '@saas-ui/react'
Usage
The Divider
displays a thin horizontal or vertical line, and renders a hr
tag.
Basic
<Divider />
Variants
The Divider
component comes with 2 variants: solid
and dashed
.
<Divider variant="dashed" />
Label
You can add a text label that will be aligned in the center of the Divider
,
this will render a div
tag.
<Divider><DividerLabel>Divider</DividerLabel></Divider>
Divider Orientation
Pass the orientation
prop and set it to either horizontal
or vertical
. The default is horizontal
.
<Divider orientation="horizontal" />
If the vertical orientation is used, make sure that the parent element is assigned a height.
import { Center } from '@chakra-ui/react'import { Divider } from '@saas-ui/react'export default function Vertical() {return (<Center height="50px"><Divider orientation="vertical" /></Center>)}
Vertical with a label.
import { Center } from '@chakra-ui/react'import { Divider, DividerLabel } from '@saas-ui/react'export default function VerticalWithLabel() {return (<Center height="100px"><Divider orientation="vertical"><DividerLabel>Label</DividerLabel></Divider></Center>)}
Composition
import { Stack, Text } from '@chakra-ui/react'import { Divider, DividerLabel } from '@saas-ui/react'export default function Composition() {return (<Stack direction="row" h="100px" p={4}><Divider orientation="vertical" /><Text>Saas UI</Text></Stack>)}
Was this helpful?