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

Кнопка с меню

Кнопка с меню соединяет основное действие и стрелку, которая открывает меню альтернатив. Основное действие срабатывает в одно нажатие, остальные ждут за стрелкой.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Merge pull request Squash and merge Rebase and merge 
<tk-split-button variant="primary" trigger-label="More merge options">
  <tk-button slot="action">Merge pull request</tk-button>
  <tk-menu slot="menu" label="Merge options">
    <tk-menu-item>Squash and merge</tk-menu-item>
    <tk-menu-item>Rebase and merge</tk-menu-item>
  </tk-menu>
</tk-split-button>

Анатомия

Часть Что это
tk-split-button сам элемент; объединяет два сегмента
слот action основное действие: tk-button слева; своя остановка Tab
part divider линия 1px между сегментами
стрелка кнопка-иконка со стрелкой, её добавляет сам компонент; своя остановка Tab
слот menu tk-menu только с пунктами; его открывает стрелка

Композиция

Положите tk-button в слот action, а tk-menu только с пунктами — в слот menu. Триггер не пишите: компонент сам добавит стрелку и свяжет её с меню. variant, size, disabled и loading он передаёт обоим сегментам, поэтому задавайте их на tk-split-button, а не на частях.

Слушайте click на кнопке действия и на каждом tk-menu-item.

Варианты

Publish Schedule Export Export as PDF 
<tk-split-button variant="primary" trigger-label="More publish options">
  <tk-button slot="action">Publish</tk-button>
  <tk-menu slot="menu" label="Publish options"><tk-menu-item>Schedule</tk-menu-item></tk-menu>
</tk-split-button>
<tk-split-button trigger-label="More export options">
  <tk-button slot="action">Export</tk-button>
  <tk-menu slot="menu" label="Export options"><tk-menu-item>Export as PDF</tk-menu-item></tk-menu>
</tk-split-button>
  • primary: главное действие экрана. Одна на экран.
  • secondary (по умолчанию): все остальные кнопки с меню.

Варианта ghost и опасной кнопки с меню нет.

Форма

shape="round" полностью скругляет края блока. Стык между сегментами остаётся прямым.

Save Save as copy 
<tk-split-button shape="round" trigger-label="More save options">
  <tk-button slot="action">Save</tk-button>
  <tk-menu slot="menu" label="Save options"><tk-menu-item>Save as copy</tk-menu-item></tk-menu>
</tk-split-button>

Размеры

Small Duplicate Large Duplicate 
<tk-split-button size="small" trigger-label="More options">
  <tk-button slot="action">Small</tk-button>
  <tk-menu slot="menu" label="Options"><tk-menu-item>Duplicate</tk-menu-item></tk-menu>
</tk-split-button>
<tk-split-button size="large" trigger-label="More options">
  <tk-button slot="action">Large</tk-button>
  <tk-menu slot="menu" label="Options"><tk-menu-item>Duplicate</tk-menu-item></tk-menu>
</tk-split-button>

small, medium (по умолчанию) и large высотой 24, 32 и 36px, как у Button, поэтому кнопка с меню выравнивается с другими кнопками на панели.

Состояния

Publish Schedule Publish Schedule 
<tk-split-button disabled trigger-label="More publish options">
  <tk-button slot="action">Publish</tk-button>
  <tk-menu slot="menu" label="Publish options"><tk-menu-item>Schedule</tk-menu-item></tk-menu>
</tk-split-button>
<tk-split-button variant="primary" loading trigger-label="More publish options">
  <tk-button slot="action">Publish</tk-button>
  <tk-menu slot="menu" label="Publish options"><tk-menu-item>Schedule</tk-menu-item></tk-menu>
</tk-split-button>
  • disabled: отключает оба сегмента.
  • loading: в кнопке действия крутится индикатор, повторные нажатия не срабатывают; стрелка отключена, пока идёт загрузка.