Divider

Dividers are used to visually separate content in a list or group.

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?