Разделитель

Разделитель отделяет группы содержимого. Он рисует элемент с role="separator", а не <hr>, потому что подпись помещается внутрь, а <hr> потомков не принимает.

Простой разделитель

Всё, что сверху.

Всё, что снизу.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Всё, что сверху.'),
  divider(),
  text({ tone: 'muted' }, 'Всё, что снизу.'),
)

С подписью

Потомки становятся подписью, центрированной в линии.

или

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Продолжить через GitHub'),
  divider('или'),
  button({ block: true }, 'Продолжить по почте'),
)

Интервалы

spacing задаёт отступ сверху и снизу — из той же шкалы, что и всё остальное.

Плотно

По умолчанию

Просторно

Конец

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Плотно'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'По умолчанию'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Просторно'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Конец'),
)

Вертикально

Вертикальному разделителю нужен родитель, задающий высоту, — flex-строка, элементы которой растягиваются, а это stack() и делает по умолчанию.

4,1 кБ

12 страниц

0 островов

stack({ direction: 'row', gap: 'none', align: 'stretch' },
  text({ variant: 'small' }, '4,1 кБ'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '12 страниц'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '0 островов'),
)

Пропсы

Проп	Тип	По умолчанию	Описание
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	В какую сторону идёт линия.
`spacing`	`Space`	`'md'`	Отступ по обе стороны линии.