Separator

Separator is the visual division primitive for horizontal and vertical boundaries between adjacent UI regions.

Overview

Separator has a very small styling contract driven by orientation and one shared color token.

Public CSS Variables

Profile

Billing

Security

Variable	Value	Affects
divider colorroot		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root starts as a full-width horizontal line and switches dimensions based on data-orientation.

State And Variant Interaction

horizontal uses width: 100% and height: 1px
vertical uses width: 1px and height: 100%
there are no component-local state variants

Examples

Inset list divider

The line color is overridden with background and the --separator-non-opaque token, and width: 'auto' with marginInlineStart makes the line start after the avatar, like a native list. The dividers are decorative, so they are hidden with aria-hidden.

LTRRTL

subtle-horizontal-divider.tsx · 28 lines

import { Separator, Text } from '@vega-ui/react';
import { Fragment } from 'react';

const contacts = ['Alicia Gómez', 'Ben Carter', 'Chen Wei', 'Dana Novak'];

export default function SubtleHorizontalDivider() {
  return (
    <div style={{ display: 'grid', width: '100%' }}>
      {contacts.map((name, index) => (
        <Fragment key={name}>
          {index > 0 && (
            <Separator

Short vertical divider

In a row aligned to the center, an explicit height gives a vertical separator a fixed length shorter than the line of text.

LTRRTL

vertical-toolbar-divider.tsx · 13 lines

import { Separator, Text } from '@vega-ui/react';

export default function VerticalToolbarDivider() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-4)' }}>
      <Text size={2} style={{ color: 'var(--label-secondary)' }}>Edited 2 hours ago</Text>
      <Separator orientation='vertical' style={{ height: 'var(--spacing-6)' }} />
      <Text size={2} style={{ color: 'var(--label-secondary)' }}>3 comments</Text>
      <Separator orientation='vertical' style={{ height: 'var(--spacing-6)' }} />
      <Text size={2} style={{ color: 'var(--label-secondary)' }}>Shared with team</Text>
    </div>
  );

Do Not Override

relying on the separator to create spacing by itself
using a decorative divider where semantic grouping is required