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#