Skip to content
rdloom

Separator

A thin line that divides content, horizontal or vertical, with an optional label in the middle such as "or".

Displayv0.1.0experimentalWCAG 2.2 AAView spec

Account settings

Notification settings

import { Separator } from "@rdloom/react";

export default function SeparatorBasicExample() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3 text-sm">
      <p>Account settings</p>
      <Separator />
      <p>Notification settings</p>
    </div>
  );
}

Installation

npx rdloom add separator

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/separator.json

Works, but without upgrade tracking.

Usage

import { Separator } from "@rdloom/react";

<div className="flex w-full max-w-sm flex-col gap-3 text-sm">
  <p>Account settings</p>
  <Separator />
  <p>Notification settings</p>
</div>

With label

import { Button, Separator } from "@rdloom/react";

export default function SeparatorWithLabelExample() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Button variant="primary">Sign in with a password</Button>
      <Separator label="or" />
      <Button variant="secondary">Email me a sign-in link</Button>
    </div>
  );
}

Vertical

Docs
Blog
Changelog
import { Separator } from "@rdloom/react";

export default function SeparatorVerticalExample() {
  return (
    <div className="flex h-6 items-center gap-3 text-sm">
      <span>Docs</span>
      <Separator orientation="vertical" decorative />
      <span>Blog</span>
      <Separator orientation="vertical" decorative />
      <span>Changelog</span>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

PropTypeDefault
orientation

Direction of the line. A vertical one needs a parent with a height.

"horizontal" | "vertical""horizontal"
label

Short text in the middle of a horizontal line, e.g. "or".

stringnone
decorative

Removes the separator from the accessibility tree (role none) when it is only visual. Leave off when the line marks a real change of topic.

booleanfalse

Accessibility

Role separator, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

  • A semantic separator may be announced as a separator, with its orientation
  • A decorative one is not announced
  • A label is read as ordinary text

What your code must do

  • A semantic separator has role separator and aria-orientation when vertical
  • With decorative set it has role none and is skipped by assistive technology
  • A label is real text, not an image, and meets 4.5:1 against the background
  • A vertical separator is never the only thing that marks a boundary

Guidelines

Use it when

  • Dividing groups in a menu, toolbar or form
  • Splitting alternatives with a word, like sign in with a password or with a link

Avoid it when

  • Space or a heading already makes the grouping clear
  • Dividing every row of a list: use the styling of the list itself

Don't

  • Using a separator for layout spacing
  • A long label: a separator label is one or two words

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

  • --rd-color-border-default
  • --rd-color-text-muted