Components

Separator

A thin rule that splits content into groups, with an optional short label in the middle.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Separator draws a 1 px horizontal rule in color-border-subtle between two groups of content. It is as wide as its container.

First item

Second item

import { Separator } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="flex w-full max-w-80 flex-col gap-md">
      <span className="type-body-md text-fg-default">First item</span>
      <Separator />
      <span className="type-body-md text-fg-default">Second item</span>
    </div>
  );
}

Vertical

orientation="vertical" makes the rule vertical. It stretches to the height of its row (self-stretch), so the parent must be a flex row with a height.

First item

Second item

Third item

import { Separator } from '@bigbang/ui';

export default function Vertical() {
  return (
    <div className="flex h-6 items-center gap-md">
      <span className="type-body-md text-fg-default">First item</span>
      <Separator orientation="vertical" />
      <span className="type-body-md text-fg-default">Second item</span>
      <Separator orientation="vertical" />
      <span className="type-body-md text-fg-default">Third item</span>
    </div>
  );
}

With a label

label puts a short text in the middle of a horizontal rule and names the Separator with it. A vertical Separator does not show the label.

import { Separator } from '@bigbang/ui';

export default function WithLabel() {
  return (
    <div className="w-full max-w-80">
      <Separator label="or" />
    </div>
  );
}

Decorative

decorative hides the rule from screen readers (role="none"). Use it when a heading or a list already groups the content.

First item

Second item

import { Separator } from '@bigbang/ui';

export default function Decorative() {
  return (
    <div className="flex w-full max-w-80 flex-col gap-md">
      <span className="type-body-md text-fg-default">First item</span>
      <Separator decorative />
      <span className="type-body-md text-fg-default">Second item</span>
    </div>
  );
}

Between groups

Place the rule between groups of meaning, not between every item. Here the first two items form one group and the third stands apart.

First itemSecond item

Third item

import { Separator } from '@bigbang/ui';

export default function InGroups() {
  return (
    <div className="flex w-full max-w-64 flex-col gap-sm rounded-md border border-line-subtle p-md">
      <span className="type-body-md text-fg-default">First item</span>
      <span className="type-body-md text-fg-default">Second item</span>
      <Separator />
      <span className="type-body-md text-fg-default">Third item</span>
    </div>
  );
}

Light and dark mode

The rule takes its colour from color-border-subtle and the label from color-text-subtle; light and dark mode and brand changes need no extra setting.

import { Separator } from '@bigbang/ui';

export default function WithLabel() {
  return (
    <div className="w-full max-w-80">
      <Separator label="or" />
    </div>
  );
}