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

Группа кнопок

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

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Left Center Right 
<tk-button-group label="Text alignment">
  <tk-button>Left</tk-button>
  <tk-button>Center</tk-button>
  <tk-button>Right</tk-button>
</tk-button-group>

Анатомия

Часть Что это
tk-button-group сам элемент; role="group"; ряд или столбец
слот по умолчанию две и больше tk-button или tk-icon-button; у каждой своя подпись, вариант и тон
крайние углы внешние углы первой и последней кнопки
стыки прямые внутренние углы и линия 1px между соединёнными кнопками

Расположение

Вместе и раздельно

По умолчанию кнопки соединяются в один блок. Группа выпрямляет внутренние углы и рисует линию между кнопками, поэтому подходит любой вариант. Добавьте spaced, чтобы поставить кнопки отдельно с промежутком 8px, например «Сохранить» и «Отмена». Углы соединённого ряда рассчитаны на письмо слева направо, поэтому в интерфейсе справа налево используйте spaced.

Save changes Cancel 
<tk-button-group spaced label="Form actions">
  <tk-button variant="primary">Save changes</tk-button>
  <tk-button>Cancel</tk-button>
</tk-button-group>

Ориентация

orientation="vertical" ставит кнопки столбцом, все шириной с самую широкую.

Edit Duplicate Archive 
<tk-button-group orientation="vertical" label="Row actions">
  <tk-button>Edit</tk-button>
  <tk-button>Duplicate</tk-button>
  <tk-button>Archive</tk-button>
</tk-button-group>

Форма

Задавайте shape="round" группе, а не кнопкам. Крайние углы полностью скругляются, средние остаются прямыми. У вертикального блока крайние углы скругляются на 16px. В группе со spaced каждая кнопка становится полностью скруглённой. Собственный shape кнопки в соединённой группе ни на что не влияет.

25% 50% 100% 
<tk-button-group shape="round" label="Zoom">
  <tk-button>25%</tk-button>
  <tk-button>50%</tk-button>
  <tk-button>100%</tk-button>
</tk-button-group>

Размеры

Previous Next 
<tk-button-group size="small" label="Pages">
  <tk-button>Previous</tk-button>
  <tk-button>Next</tk-button>
</tk-button-group>

Задайте size один раз на группе, и его возьмёт каждая кнопка: small, medium или large, высотой 24, 32 или 36px, как у Button. Без него каждая кнопка сохраняет свой размер. Не смешивайте размеры в соединённом блоке.

Состояния

Previous Next 
<tk-button-group disabled label="Pages">
  <tk-button>Previous</tk-button>
  <tk-button>Next</tk-button>
</tk-button-group>
  • disabled: отключает все кнопки. Кнопка, которую вы отключили отдельно, останется отключённой, когда группу снова включат. Отдельные кнопки тоже можно отключать.
  • Наведение, нажатие и фокус у каждой кнопки свои. В соединённом блоке кнопка в фокусе выходит вперёд, поэтому рамка фокуса не обрезается.