Divider

Divider separates sections of content or groups of items. It is a standalone component (no upstream Spar primitive) that renders a semantic role="separator" by default and draws its line entirely in CSS, so optional label content can sit anywhere along the line.

Usage

import { Divider } from '@takeoff-ui/react-spar';

<Divider>OR</Divider>

Playground

function PlaygroundDemo() {
  return (
    <div className="w-full max-w-md">
      <p className="text-sm">Sign in with your membership number.</p>
      <Divider>OR</Divider>
      <p className="text-sm">Continue as a guest.</p>
    </div>
  );
}

render(<PlaygroundDemo />);

Orientation

Vertical dividers stretch to the height of their flex container.

function OrientationDemo() {
  return (
    <div className="flex h-12 w-full max-w-md items-center justify-center text-sm">
      <span>Economy</span>
      <Divider orientation="vertical" />
      <span>Business</span>
      <Divider orientation="vertical" />
      <span>First</span>
    </div>
  );
}

render(<OrientationDemo />);

Appearances

function AppearancesDemo() {
  return (
    <div className="w-full max-w-md text-sm">
      <p>Solid</p>
      <Divider appearance="solid" />
      <p>Dashed</p>
      <Divider appearance="dashed" />
      <p>Dotted</p>
      <Divider appearance="dotted" />
    </div>
  );
}

render(<AppearancesDemo />);

Customization

• Line color — the line follows currentColor; set color on the root via style or your own CSS. Dashed and dotted lines pick the color up too.
• Spacing — outer margins default to 16px (margin-block for horizontal, margin-inline for vertical). Override them with inline style (e.g. marginBlock), which always wins over the recipe.
• Label — target the label slot with classNames={{ label: … }} for extra classes or slotProps={{ label: { style: … } }} for inline styles. The gap between the line and the label is the label's paddingInline (paddingBlock on vertical dividers), 8px by default.

function CustomizationDemo() {
  return (
    <div className="w-full max-w-md text-sm">
      <p>Line color</p>
      <Divider style={{ color: '#fca5a5' }}>Cancelled</Divider>
      <Divider style={{ color: '#38bdf8' }} appearance="dashed" />

      <p>Spacing</p>
      <Divider style={{ marginBlock: 4 }} />
      <Divider style={{ marginBlock: 4 }} />
      <Divider style={{ marginBlock: 32 }}>Wide spacing</Divider>

      <p>Label</p>
      <Divider slotProps={{ label: { style: { color: '#0369a1', fontWeight: 600, fontSize: 13 } } }}>
        Styled label
      </Divider>
      <Divider classNames={{ label: 'uppercase tracking-widest' }}>utility classes</Divider>

      <p>Label spacing</p>
      <Divider slotProps={{ label: { style: { paddingInline: 32 } } }}>Wide gap</Divider>
      <Divider slotProps={{ label: { style: { paddingInline: 0 } } }}>No gap</Divider>
    </div>
  );
}

render(<CustomizationDemo />);

Align

Use align to position the label along the line: start, center (the default), or end.

function AlignDemo() {
  return (
    <div className="w-full max-w-md">
      <Divider align="start">Section</Divider>
      <Divider>Section</Divider>
      <Divider align="end">Section</Divider>
    </div>
  );
}

render(<AlignDemo />);

API Reference

Divider

Props

Name	Type	Default	Description
children	React.ReactNode	-	Label content rendered between the line segments.
orientation	DividerOrientation	'horizontal'	Axis of the divider line. Vertical dividers size from their container — place them in a flex row (or give the parent an explicit height) so the line has a height to fill.
appearance	DividerAppearance	'solid'	Line style.
align	DividerAlign	'center'	Placement of the label along the divider line.
decorative	boolean	false	Marks the divider as purely visual. Decorative dividers are removed from the accessibility tree (role="none"); non-decorative dividers render role="separator" with the matching aria-orientation.
classNames	Partial<Record<DividerSlot, string>>	-	Per-slot extra classes.
slotProps	Partial<Record<DividerSlot, React.HTMLAttributes<HTMLElement>>>	-	Per-slot HTML-attribute overrides.
className	string	-	Appends custom classes to the root slot.

Data attributes

Attribute	Applied when	Purpose
data-slot="root"	Always	Stable selector for wrapper styling on the root slot.
data-slot="label"	When children are renderable	Stable selector for the wrapper-owned label slot.
data-orientation	Always	Reflects the resolved orientation prop for theme recipe scoping.
data-type	Always	Reflects the resolved appearance prop for theme recipe scoping.
data-align	Always	Reflects the resolved align prop that positions the label along the line.
role	Always	separator when the divider carries semantic meaning; none when decorative is true (removes the element from the accessibility tree).
aria-orientation	When decorative is false	Tells assistive technology the axis of the separator (horizontal | vertical). Absent on decorative dividers to avoid ARIA on a role="none" element.

Type Definitions

Name	Definition
DividerOrientation	'horizontal' | 'vertical'
DividerAppearance	'solid' | 'dashed' | 'dotted'
DividerAlign	'start' | 'center' | 'end'
DividerSlot	'root' | 'label'