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

Type: display
Intent: separate-content
Safety: low
Confirm: not needed
Undo: one-way

Interactive example

Content above the separator.

Content below the separator.

Import

tsx

import { Separator } from '@vhyxui/react'

Variants

EditDeleteShare

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the separator line.
`decorative`	`boolean`	`true`	When true, aria-hidden (decorative). When false, renders role="separator".
`label`	`string`	—	Centered text label rendered on horizontal separators.
`className`	`string`	—	Additional CSS classes.

Also accepts all standard HTMLElement attributes.

Accessibility

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)