Separator

Patterns

Toolbar Divider

When to use:

• adjacent actions need a subtle visual boundary

Composition notes:

• use orientation='vertical'
• give the parent a real height

Trade-offs:

• low visual weight
• depends on parent sizing

import { Icon, IconButton, Separator } from '@vega-ui/react';
import { AlignCenter, AlignLeft, Bold, Italic, Link, List, ListOrdered } from '@vega-ui/icons';

export default function VerticalDividerInToolbar() {
  return (
    <div
      role='toolbar'
      aria-label='Text formatting'
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 'var(--spacing-2)',

Section Break Inside A Panel

When to use:

• a panel has two related but distinct regions

Composition notes:

• keep the separator between already-labeled regions
• add spacing with layout, not with the separator itself

Trade-offs:

• keeps the surface clean
• does not explain the reason for the separation

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

export default function SectionBreakInsideAPanel() {
  return (
    <Card style={{ display: 'grid', gap: 'var(--spacing-8)', width: '100%' }}>
      <section aria-labelledby='plan-usage-title' style={{ display: 'grid', gap: 'var(--spacing-2)' }}>
        <Heading as='h3' size={4} id='plan-usage-title'>Usage this month</Heading>
        <Text size={2} style={{ color: 'var(--label-secondary)', fontVariantNumeric: 'tabular-nums' }}>7,420 of 10,000 API requests used.</Text>
      </section>
      <Separator />
      <section aria-labelledby='plan-billing-title' style={{ display: 'grid', gap: 'var(--spacing-2)' }}>
        <Heading as='h3' size={4} id='plan-billing-title'>Next invoice</Heading>

Dense Form Break

When to use:

• one form surface contains several short groups

Composition notes:

• use Separator together with explicit labels or legends
• avoid relying on the line alone

Trade-offs:

• keeps large forms readable
• still needs semantic section labeling nearby

import {
  Button,
  Fieldset,
  FieldsetLegend,
  Label,
  Separator,
  Text,
  TextField,
  TextFieldInput,
} from '@vega-ui/react';
import { useState, type FormEvent } from 'react';

Comparison

Quick Decision Rule

Use Separator for lightweight visual division. Use Heading or Fieldset when the UI needs named structure rather than only a line.

Separator vs Fieldset

• Use Separator for visual division.
• Use Fieldset for grouped form semantics.

Separator vs Heading

• Use Separator when no visible title is needed.
• Use Heading when the section needs a semantic label.

Separator vs Card

• Use Separator inside an existing layout.
• Use Card when the whole section needs its own surface.

Choose This Component When

• two adjacent regions need a subtle divider
• semantic grouping is already handled elsewhere

Do Not Choose This Component When

• a section needs a label
• a set of controls needs native group semantics

Troubleshooting

The Vertical Divider Is Not Visible

Symptom

orientation='vertical' is set, but no divider is visible.

Likely Cause

The parent layout does not provide a height for the separator to fill.

How To Verify

• inspect the parent container height
• temporarily set an explicit height and check whether the divider appears

Fix

Give the parent a defined height or stretch context when using a vertical separator.

The Divider Does Not Create Enough Space

Symptom

Content still feels cramped even though a separator is present.

Likely Cause

Separator only draws the line; it does not manage layout spacing.

How To Verify

• inspect surrounding gap, margin, or padding values

Fix

Add spacing in the parent layout and keep the separator responsible only for the visual division.

The UI Has Dividers But Still Lacks Structure

Symptom

Sections are visually split, but users still cannot tell what each section means.

Likely Cause

Separators are being used where headings or form legends should carry the structure.

How To Verify

• remove the lines mentally and check whether section meaning remains clear

Fix

Add Heading, Label, or FieldsetLegend where semantic labeling is required.