Separator

Separator — примитив визуального разделения для горизонтальных и вертикальных границ между соседними областями интерфейса.

Storybook Исходники Figma

Обзор

У Separator очень маленький контракт стилизации, который определяется ориентацией и одним общим токеном цвета.

Публичные CSS-переменные

Profile

Billing

Security

Переменная	Значение	Влияет на
цвет разделителякорень		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Корень

По умолчанию корень — горизонтальная линия на всю ширину; размеры переключаются в зависимости от data-orientation.

Взаимодействие состояний и вариантов

horizontal использует width: 100% и height: 1px
vertical использует width: 1px и height: 100%
локальных вариантов состояния у компонента нет

Примеры

Разделитель списка с отступом

Цвет линии переопределён через background и токен --separator-non-opaque, а width: 'auto' с marginInlineStart начинает линию после аватара, как в нативных списках. Разделители декоративные, поэтому скрыты через aria-hidden.

LTRRTL

subtle-horizontal-divider.tsx · 28 строк

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

Короткий вертикальный разделитель

В строке с выравниванием по центру явная height задаёт вертикальному разделителю фиксированную длину короче строки текста.

LTRRTL

vertical-toolbar-divider.tsx · 13 строк

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>
  );

Не переопределяйте

не рассчитывайте, что разделитель сам создаст отступы
не используйте декоративный разделитель там, где нужна семантическая группировка