Divider

Компонент для визуального разделения контента. Поддерживает две ориентации (горизонтальная по умолчанию и вертикальная) и два варианта толщины линии (regular — 1px, thin — 0.5px). Объявляет ARIA-семантику role='separator' + aria-orientation.

Демо

<Divider appearance="neutral" orientation="horizontal" variant="regular" />

Когда использовать

• Между секциями страницы или блоками контента — горизонтальный regular.
• Внутри тулбаров или рядов элементов — вертикальный regular (контейнер должен задать высоту).
• Вложенные блоки и плотные списки — thin, чтобы визуально ослабить границу.

Не ставьте Divider между каждым элементом списка — группируйте логические блоки.

Анатомия

Variant

Толщина линии: regular — стандартная разделительная линия между секциями, thin — ослабленная (вложенные блоки, плотные списки).

Orientation

Ориентация:

• horizontal — между строками и секциями, по умолчанию занимает всю ширину.
• vertical — между элементами в ряд, высоту задаёт место использования.

Вертикальный разделитель тянется по высоте родителя, поэтому в контейнере с авто-высотой, при align-items: center и внутри inline-flex он получает нулевую высоту и не виден. Растянутую высоту задавайте на месте использования: align-self: stretch на самом разделителе либо align-items: stretch и фиксированная высота у ряда — как в примере ниже.

Установка

pnpm add @cloud-ru/ds-divider

import { APPEARANCE, Divider, ORIENTATION, VARIANT } from '@cloud-ru/ds-divider'

Примеры использования

Горизонтальный (по умолчанию)

import { Divider } from '@cloud-ru/ds-divider';

export function Horizontal() {
  return <Divider />;
}

Тонкая линия

import { Divider } from '@cloud-ru/ds-divider';

export function Thin() {
  return <Divider variant='thin' />;
}

Вертикальный разделитель

import { Divider } from '@cloud-ru/ds-divider';

import styles from './VerticalInRow.module.scss';

export function VerticalInRow() {
  return (
    <div className={styles.row}>
      <span className={styles.label}>Left</span>
      <div className={styles.dividerCell}>
        <Divider orientation='vertical' />
      </div>
      <span className={styles.label}>Right</span>
    </div>
  );
}

Props

Types

DividerProps

Unions

DividerAppearance

DividerOrientation

DividerVariant

Принимает вспомогательные атрибуты data-test-id и ARIA через тип WithSupportProps из @cloud-ru/ds-utils.

Storybook

Figma