Separator

A hairline between groups: across, upright, or with a word in the middle.

cennge-ui

MIT

v0.3.1

A separator with children is two lines with your text between them: "or" between two ways to sign in.
An upright separator stretches to the height of the row it stands in.
Decorative by default, so screen readers skip it; isDecorative={false} makes it a separator they announce.

Switch the theme: the lines take its border colour.

Field marks

Import: import { Separator } from "cennge-ui";
Size: 0.5 KB gzip for this import, its dependencies aside
Pattern: role="none"; role="separator" when not decorative
SSR: Rendered on the server in the Next.js check; hydrates without a warning
Colour: The border token, 1 px
Tests: Unit tests
Source: src/components/separator

When to use#

A Separator draws a line where spacing alone does not part two groups: sign-in options from a form, one day's commits from the next, two sets of buttons in a toolbar. Where a gap already does the job, leave the line out.

Similar#

Dropdown and Command have separators of their own for their menus; use those inside them.
Accordion draws lines between its items by itself in its light and bordered variants.

A word in the middle#

Children turn a horizontal separator into two lines with the text between them, in small muted type. The text stays readable by screen readers even while the lines are hidden from them.

November 1

test(next): look from both sides of the server's time zone on every run
fix(playground): read the repositories' update dates in UTC

October 31

fix(kbd): draw the key symbols at the size of the cap
feat(charts): Sparkline

with-label.tsx

import { Separator } from "cennge-ui";

const days = [
  {
    date: "November 1",
    commits: ["test(next): look from both sides of the server's time zone on every run", "fix(playground): read the repositories' update dates in UTC"],
  },
  {
    date: "October 31",
    commits: ["fix(kbd): draw the key symbols at the size of the cap", "feat(charts): Sparkline"],
  },
];

export default function CommitsByDay() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {days.map((day) => (
        <section key={day.date} className="flex flex-col gap-2">
          <Separator>{day.date}</Separator>
          <ul className="flex flex-col gap-1 text-sm">
            {day.commits.map((message) => (
              <li key={message} className="truncate">
                {message}
              </li>
            ))}
          </ul>
        </section>
      ))}
    </div>
  );
}

Upright#

orientation="vertical" stretches to the height of the row. For a shorter line, give it a height and centre it, as between the two groups of buttons here.

vertical.tsx

import { Button, Separator } from "cennge-ui";

export default function Toolbar() {
  return (
    <div className="flex items-center gap-2">
      <Button size="sm" variant="light">
        Code
      </Button>
      <Button size="sm" variant="light">
        Issues
      </Button>
      <Separator orientation="vertical" className="h-5 self-center" />
      <Button size="sm" variant="light">
        Actions
      </Button>
      <Button size="sm" variant="light">
        Releases
      </Button>
    </div>
  );
}

Accessibility#

By default the line is decoration: it renders role="none" and screen readers pass over it. When it parts groups whose split matters, such as two sets of commands, pass isDecorative={false}: it becomes role="separator", and a vertical one also says aria-orientation="vertical".

Props#

Prop	Type	Default
`orientation`	`"horizontal""vertical"`	`"horizontal"`
`isDecorative`	`boolean`Purely visual: hidden from screen readers. Turn off when the line separates meaningful groups of content.	`true`
`children`	`React.ReactNode`Text in the middle of a horizontal line, e.g. "or".	–

Also takes every attribute of <div>.