НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Разделитель

Разделитель — тонкая линия между двумя группами содержимого.

Стабильный Figma
ОбзорИспользованиеAPIДоступность

Signed in as ada@example.com

Sign out of all devices

<p>Signed in as ada@example.com</p>
<tk-divider></tk-divider>
<p>Sign out of all devices</p>

Анатомия

Часть Что это
tk-divider сам элемент; на него нельзя перейти фокусом, он не реагирует на указатель
part rule линия; один отрезок или по одному с каждой стороны подписи
part label подпись по центру, по желанию; только у горизонтального

Направление

Bold Italic Link 
<div style="display: flex; align-items: center; gap: var(--space-8); height: 32px">
  <tk-button variant="ghost">Bold</tk-button>
  <tk-button variant="ghost">Italic</tk-button>
  <tk-divider orientation="vertical"></tk-divider>
  <tk-button variant="ghost">Link</tk-button>
</div>
  • horizontal (по умолчанию): линия во всю ширину в вертикальном потоке.
  • vertical: линия во всю высоту в строке. Поместите его во flex-строку или задайте высоту; сам по себе он высотой в одну строку текста.

Подпись

Текст в слоте по умолчанию разрывает линию и встаёт по центру, например «ИЛИ» между двумя вариантами.

Continue with email OR Continue with Google
<tk-button full-width>Continue with email</tk-button>
<tk-divider>OR</tk-divider>
<tk-button variant="outline" full-width>Continue with Google</tk-button>

Подпись работает только у горизонтального разделителя; вертикальный её не показывает. Скринридер читает подпись как имя разделителя.

Отступы, поля и заметность

Отступы и цвет задают CSS-переменными на элементе. По умолчанию линия идёт на всю ширину контейнера; чтобы отодвинуть её от краёв, задайте элементу margin.

<tk-divider style="--tk-divider-spacing: var(--space-16)"></tk-divider>
<tk-divider style="--tk-divider-color: var(--border-default)"></tk-divider>
<tk-divider style="margin-inline: var(--space-16)"></tk-divider>
  • --tk-divider-spacing: отступ с обеих сторон линии, вдоль её оси.
  • --tk-divider-color: цвет линии; var(--border-default) даёт более заметную линию между крупными областями.
  • --tk-divider-thickness: по умолчанию 1px; меняют редко.

Декоративный

Добавьте decorative, если группировка уже видна из структуры, например между двумя разделами-ориентирами или пунктами настоящего списка. Атрибут скрывает разделитель от скринридеров. Разделитель с подписью не скрывается никогда.

<tk-divider decorative></tk-divider>