Skip to main content

Separator

Stable

Visual divider between content sections. Decorative by default (aria-hidden). Semantic mode uses role='separator' for structural meaning. Supports horizontal and vertical orientations with an optional centered label.

DisplayLayoutVhyxSeal

Interactive example

Content above the separator.

Content below the separator.

Horizontal separator between content blocks

Import

tsx
import { Separator } from '@vhyxui/react'

Variants

With centered label
EditDeleteShare
Vertical orientation
Semantic (non-decorative)

Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction of the separator line.
decorativebooleantrueWhen true, aria-hidden (decorative). When false, renders role="separator".
labelstring—Centered text label rendered on horizontal separators.
classNamestring—Additional CSS classes.

Also accepts all standard HTMLElement attributes.

Accessibility

  • ✓ decorative=true (default) sets aria-hidden="true" — screen readers skip it entirely.
  • ✓ decorative=false renders role="separator" with aria-orientation for structural divisions.
  • ✓ Label text on horizontal separators is visible text and read by screen readers.

Agent contract

Default VhyxSeal contract shipped with every Separator.

Default contract
{
  "type": "display",
  "intent": "separate-content",
  "description": "Visually or semantically separates adjacent content sections",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "None — display only.",
  "affects": [],
  "reversible": false,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_7a4ec72b"
}

Theming

Override these CSS tokens to theme Separator.

--vhyx-color-borderLine color
--vhyx-border-widthLine thickness
--vhyx-text-xsLabel font size
--vhyx-color-text-mutedLabel text color
--vhyx-color-bgLabel background (isolates from line)

Examples

Auth form divider

'or continue with' between login options

Toolbar divider

Vertical separator between toolbar actions