Separator

When to use

Use Separator to split independent groups of content: menu sections, toolbar groups, form sections and options divided by “or”.

When not to use

• When spacing is enough: If whitespace already separates the groups, skip the rule; every rule adds visual weight.
• Between list rows: To draw a rule between every child of a stack, use the separator prop of Stack.
• For a box outline: Borders come from the border prop of Box; Separator does not draw a frame.

Anatomy

or

LightDark

Copy code

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

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

1. Rule: 1 px thick (border-width-default), in color-border-subtle. With a label, it sits on both sides of the text as two segments.
2. Label: Optional short text (label); visible on a horizontal rule only.

Behaviour

• Separator is static: it does not change on hover, click or focus, and it is not in the tab order.
• A horizontal rule fills the full width of its container; a vertical rule stretches to the height of its row (self-stretch).
• With a label, the two rule segments share the remaining width equally with flex-1; the gap between label and segments is space-md (8 px).
• A label given together with orientation="vertical" is ignored.
• Use className for layout only, such as margins; do not change colour or thickness.

Guidelines

Place it between groups

The rule sits between groups of meaning. Separating every item makes the groups unreadable.

First itemSecond item

Third item

DoThe rule separates two groups.

First item

Second item

Third item

Don'tA rule between every item hides the grouping.

Keep the label short

The label sits on one line in the middle of the rule; a long text crushes the rule.

or

DoA one-word label.

Choose only one of these two options

Don'tA long label narrows the rule.

Content

• Write the label in one or two words: “or”.
• Use sentence case and no punctuation.
• Do not use the label as a command or a heading; use Heading for a section title.

Turkish	English
veya	or
ya da	or

Related components

• Stack: Its separator prop draws a rule between children.
• Box: The border prop for borders and frames.
• Heading: A heading that names a group.