Divider

A line between sections of content, horizontal or vertical, with an optional label such as "or".

Basic usage

<Divider> renders an <hr>, the line chassis-css's reboot draws, with the class .divider. An <hr> is a separator to assistive technology on its own.

The first part of the page.

The second part of the page.

import { Divider } from '@chassis-ui/react'

export const Example = () => (
  <>
    <p>The first part of the page.</p>
    <Divider />
    <p className="mb-0">The second part of the page.</p>
  </>
)

Label

Children become a label in the middle of the line, such as "or" between two ways to sign in. A divider with a label renders a <div> with role="separator", since an <hr> can't hold content, and the label names the separator through aria-labelledby. An aria-label given to the divider names it instead.

import { Button, Divider, Stack } from '@chassis-ui/react'

export const Example = () => (
  <Stack direction="vertical" style={{ maxWidth: '24rem' }}>
    <Button>Sign in with a passkey</Button>
    <Divider>or</Divider>
    <Button variant="outline">Sign in with a password</Button>
  </Stack>
)

labelPlacement moves the label to the start or the end of the line, which then runs on one side only.

Account

Security

Billing

import { Divider } from '@chassis-ui/react'

export const Example = () => (
  <>
    <Divider labelPlacement="start">Account</Divider>
    <Divider>Security</Divider>
    <Divider labelPlacement="end">Billing</Divider>
  </>
)

Vertical

orientation="vertical" renders a <div> with role="separator" and aria-orientation="vertical", drawn as chassis-css's vertical rule: it stretches to the height of a flex row, and is 1em high elsewhere.

import { Button, Divider, Stack } from '@chassis-ui/react'

export const Example = () => (
  <Stack gap="md">
    <Button variant="basic">Edit</Button>
    <Button variant="basic">Duplicate</Button>
    <Divider orientation="vertical" />
    <Button variant="basic" color="danger">
      Delete
    </Button>
  </Stack>
)

A vertical divider takes a label too. The line on each side of it is at least 1em long, so a row the label would fill grows instead.

import { Button, Divider, Stack } from '@chassis-ui/react'

export const Example = () => (
  <Stack gap="md">
    <Button>Sign in with a passkey</Button>
    <Divider orientation="vertical">or</Divider>
    <Button variant="outline">Sign in with a password</Button>
  </Stack>
)

Spacing, color and thickness

The margin utilities set the space around the line (className="my-xl"), as they do for any element. The line's color, thickness and opacity, and the label's color, size and distance from the line, are CSS custom properties. Their defaults are the values chassis-css gives <hr> and .vr.

Property	Default
`--cx-divider-color`	`var(--cx-border-subtle)`
`--cx-divider-size`	`var(--cx-border-width-md)`
`--cx-divider-opacity`	`var(--cx-opacity-solid)`
`--cx-divider-margin`	`var(--cx-space-md) 0`
`--cx-divider-gap`	`var(--cx-space-sm)`
`--cx-divider-label-fg-color`	`var(--cx-fg-subtle)`
`--cx-divider-label-font-size`	`var(--cx-font-size-text-sm)`

A menu sets --cx-divider-color and --cx-divider-margin for its own dividers, so a <Divider> inside one matches them. These styles are in this package's own stylesheet, @chassis-ui/react/style.css (see Theming).

New messages

import type { CSSProperties } from 'react'
import { Divider } from '@chassis-ui/react'

const primary = {
  '--cx-divider-color': 'var(--cx-primary)',
  '--cx-divider-size': 'var(--cx-border-width-xl)',
  '--cx-divider-label-fg-color': 'var(--cx-primary)'
} as CSSProperties

export const Example = () => (
  <>
    <Divider className="my-xl" />
    <Divider style={primary}>New messages</Divider>
  </>
)

Other elements

component renders another element, which gets role="separator", and asChild makes the single child element the separator, with that element's own children as the label: <Divider asChild><div>or</div></Divider>. Inside a <Menu>, use <MenuDivider>, which fits the menu's list markup.

API

Divider

Prop	Type	Default
`asChild?`	`boolean`	—
Render the single child element in place of this component's own element, with this component's classes, props and ref merged onto it: `<Button asChild><Link href="/login">Log in</Link></Button>`. The alternative to `component` for React Server Components — an element can be passed from the server to this package's client components, a component reference (`component={Link}`) can't.
`children?`	`ReactNode`	—
A label shown in the line, such as "or" between two ways to sign in. It names the separator for screen readers. Not possible on an `<hr>`, which can't hold content.
`className?`	`string`	—
A string of all className you want applied to the component.
`component?`	`ElementType`	—
Component used for the root node. Either a string to use an HTML element or a component. Defaults to `hr`, or `div` for a vertical divider or one with a label.
`labelPlacement?`	`"center" \| "start" \| "end"`	`'center'`
Where the label sits along the line. `start` and `end` draw the line on one side only.
`orientation?`	`"horizontal" \| "vertical"`	`'horizontal'`
The direction of the line. A vertical divider stretches to the height of its flex row.
`ref?`	`any`	—