Divider

Used to create visual separation between content.

Panda

import { Divider } from "styled-system/jsx";

Usage

Used to visually separate content.

First

Second

Third

import { Text } from '@cerberus/react'
import { Divider, VStack } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <VStack w="3/4">
      <Text>First</Text>
      <Divider color="page.border.initial" />
      <Text>Second</Text>
      <Divider color="page.border.initial" />
      <Text>Third</Text>
    </VStack>
  )
}

Appearance

To change the appearance of the divider, use the borderStyle prop.

import { Divider, VStack } from 'styled-system/jsx'

export function AppearanceDemo() {
  return (
    <VStack gap="lg" w="3/4">
      <Divider borderStyle="solid" />
      <Divider borderStyle="dashed" />
      <Divider borderStyle="dotted" />
    </VStack>
  )
}

Orientation

Use the orientation prop to change the orientation of the divider.

Text

import { Text } from '@cerberus/react'
import { type PropsWithChildren } from 'react'
import { Divider, HStack } from 'styled-system/jsx'

function VertDivider(props: PropsWithChildren<object>) {
  return (
    <Divider color="page.border.initial" orientation="vertical" {...props} />
  )
}

export function OrientationDemo() {
  return (
    <HStack h="2rem" gap="lg" justify="center" pt="md" w="3/4">
      <Text>Text</Text>
      <VertDivider />
      <Text>Text</Text>
      <VertDivider />
      <Text>Text</Text>
    </HStack>
  )
}

Thickness

Use the thickness prop to change the thickness of the divider.

import { Divider, VStack } from 'styled-system/jsx'

export function ThicknessDemo() {
  return (
    <VStack gap="lg" w="3/4">
      <Divider thickness="1px" />
      <Divider thickness="2px" />
      <Divider thickness="4px" />
    </VStack>
  )
}

Color

Use the color prop to change the color of the divider.

import { Divider, VStack } from 'styled-system/jsx'

export function ColorDemo() {
  return (
    <VStack gap="lg" w="3/4">
      <Divider color="page.border.initial" />
      <Divider color="info.border.initial" />
      <Divider color="neutral.100" />
    </VStack>
  )
}

Label

Create visual labels by combining a Divider with other layout components.

Label (start)

Label (end)

Label (center)

import { Text } from '@cerberus/react'
import { PropsWithChildren } from 'react'
import { Divider, HStack, Stack } from 'styled-system/jsx'

function TextLabel(props: PropsWithChildren<object>) {
  return <Text flexShrink="0" textStyle="label-sm" {...props} />
}

export function LabelDemo() {
  return (
    <Stack w="3/4">
      <HStack>
        <TextLabel>Label (start)</TextLabel>
        <Divider flex="1" />
      </HStack>

      <HStack>
        <Divider flex="1" />
        <TextLabel>Label (end)</TextLabel>
      </HStack>

      <HStack>
        <Divider flex="1" />
        <TextLabel>Label (center)</TextLabel>
        <Divider flex="1" />
      </HStack>
    </Stack>
  )
}

Props

The Divider accepts any style prop in addition to the following:

Prop	Type	Description
`orientation`	`horizontal,vertical`	The orientation of the divider. Defaults to `"horizontal"`.
`thickness`	`string`	The thickness of the divider. Defaults to `"1px"`.
`color`	`string`	The color of the divider. Defaults to `"gray.200"`.

On this page

Edit this page on Github