Divider

Used to create visual separation between content.

Panda

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

Usage

Used to visually separate content.

Appearance

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

Orientation

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

Thickness

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

Color

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

Label

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

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

Loading...

Loading...

Loading...

Loading...

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>
  )
}

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>
  )
}

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>
  )
}

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>
  )
}

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>
  )
}

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>
  )
}