Skip to main content
Join the waitlist

Separator

Draws one hairline between sections of related content.

import { Separator } from "@usefragments/ui";Source

Preview

import { Separator } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';
import { Text } from '@usefragments/ui';

<Stack gap="md">
  <Text>Above</Text>

Usage

Use when

  • Dividing sections that spacing alone cannot separate
  • Labelled breaks such as an Or divider
  • Splitting groups of controls inside a toolbar (length="control")

Avoid when

  • Whenever spacing already reads as a break
  • Decorative rules (use a border)
  • Building layout structure (use Grid)

Implementation notes

  • Use sparingly — stacked rules read as noise
  • The parent owns the space around the rule: put it in a Stack and set gap
  • One weight only: the rule is always a hairline in the line colour
  • orientation="vertical" stretches across the parent; use length="control" between toolbar controls
  • Add aria-hidden when the rule is purely decorative

Installation

pnpm add @usefragments/ui

Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Examples

With Label

Words sit between two rules for a major break.

import { Separator } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';
import { Text } from '@usefragments/ui';

<Stack gap="md">
  <Text>Continue with email</Text>

Vertical

Divides items sitting in a row.

import { Separator } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';
import { Text } from '@usefragments/ui';

<Stack direction="row" align="center" gap="md">
  <Text>Item 1</Text>

Toolbar

length="control" stops the rule at the control height between toolbar groups.

import { LinkSimple, TextB } from '@phosphor-icons/react';
import { IconButton } from '@usefragments/ui';
import { Separator } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';

<Stack direction="row" align="center" gap="xs">

API reference

Component props
Prop
Type
Default
Description
labelReact.ReactNodeNot setWords between two horizontal rules; a sibling of the rule, never inside its separator role
lengthSeparatorLength | undefinedcontrolfullfullHow far a vertical rule runs: full stretches across the parent, control stops at the compact control height with a small margin either side (the toolbar divider). Ignored on horizontal rules.
orientationSeparatorOrientation | undefinedhorizontalverticalhorizontalDirection of the rule

Accessibility

  • The rule carries role="separator" and aria-orientation
  • A label is readable text beside the rule, not its accessible name
  • Decorative separators should be aria-hidden

Related components

  • CardsiblingCards provide stronger visual grouping

Next steps