Components

Separator

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

Installation

Separator is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab for details.

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

<Separator />;
<Separator label="or" />;
<Separator orientation="vertical" />;

orientation

Description: Direction of the rule. A vertical Separator stretches to the height of its row.
Type: 'horizontal' | 'vertical'
Default: 'horizontal'

label

Description: Short text in the middle of a horizontal rule, such as "veya" or "or". It names the separator for screen readers.
Type: string

decorative

Description: The rule is only visual: it gets role="none" and screen readers skip it. Use it when headings or lists already group the content.
Type: boolean
Default: false

className

Description: For layout only: margins. Do not use it to change the colour or thickness.
Type: string

Separator takes no other attributes such as id or aria-*. ref is not forwarded.

data-component="separator": on the root element.
data-part="label": on the <span> that wraps the text while label is shown.

A vertical Separator stretches to the height of its row, so the parent must be a flex row with a height.

<div className="flex h-6 items-center gap-md">
  <span>First item</span>
  <Separator orientation="vertical" />
  <span>Second item</span>
</div>