Panel

Separator

Draws a thin line that divides content, horizontally or vertically.

Import

import { Separator } from "@booleanpress/ui/separator"

Usage

import { Separator } from "@booleanpress/ui/separator"

export function Divided() {
  return (
    <div>
      <p>Delivery settings</p>
      <Separator className="my-4" />
      <p>Retention</p>
    </div>
  )
}

By default it is decorative: it is hidden from assistive technology, because most lines only decorate. Set decorative={false} when the line marks a real boundary between two sections that a screen-reader user should know about. A horizontal separator fills the width of its parent; a vertical one fills its height, so give the parent a height (h-5, or a flex row). It does not move or resize: it is not a window splitter.

Examples

Horizontal

A line between a heading and the text below it.

Delivery settings

Choose how failed emails are retried.

Retry up to 3 times, 10 minutes apart.

Vertical

Lines between inline items; the parent row sets the height.

Logs

Routing

Notifications

Semantic

decorative={false} exposes the line to assistive technology as a separator.

Failed emails

Delivered emails

Accessibility

Semantics: A decorative separator renders role="none". With decorative={false} it renders role="separator", and a vertical one adds aria-orientation="vertical" (horizontal is the default of the role).
Labels: A separator needs no name.
Focus: It is not focusable, and the arrow keys do nothing: it is not an interactive splitter.
Known limits: The line is 1 px of --border. It is a visual cue only; never rely on it alone to show that two pieces of content are separate.

Keyboard

Keyboard
Key	Behaviour

API

Separator

Renders Radix Separator.Root and passes it every other prop.

Separator props
Prop	Type	Default	Description
`asChild`	`boolean`		Render the child element instead, with this part's behaviour and classes merged onto it.
`decorative`	`boolean`		Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.
`orientation`	`"horizontal" \| "vertical"`	`vertical`	Either `vertical` or `horizontal`. Defaults to `horizontal`.

Every part takes className, merged with its defaults by cn(), and ref, which reaches the element it renders.

Data attributes: data-slot="separator" (Separator).

Theming

The tokens its classes read. Change their values in your theme, and it follows.

Theme tokens
Token	Used for
`--border`	background