07 · Components · In progress

Split-Button

Кнопка с одним основным действием и списком дополнительных, скрытых под областью с троеточием. Левый сегмент выполняет действие сразу, правый открывает меню. Решает задачу «одно действие в 90% случаев, ещё несколько — изредка».

Анатомия

Figma 94:9297 · снято обходом Plugin API, не по картинке

Контейнер — inline-flex, gap 0, overflow hidden, обводка 1px Static/Border/Neutral-Blue/Low, радиус Radius = 12 (MD). Обрезает углы крайних сегментов.

Сегмент действия — паддинги 10, заливка Fill/Neutral-Blue/Outline/High Contrast (Default). Разделитель — правая граница сегмента, остальные три стороны 0.

Иконка — 20×20, цвет Icon/Neutral-Blue/Outline/Default. В мастере плейсхолдер circle-dashed, глиф задаёт потребитель. Необязательна.

Лейбл — 16/20, Text/Neutral-Blue/Outline/Default, разрядка внутри сегмента 6.

Счётчик — Badge Soft/Neutral. В мастере скрыт (visible: false): по умолчанию его нет, а не «есть и пустой».

Сегмент-триггер — 40×40, только иконка ellipsis. Квадрат получается сам: 20 + 10 + 10.

Размеры

Мода коллекции ❖ Button: SM 32 · MD 40 · LG 48 · XL 56 — привязки мастера резолвятся во всех четырёх. XL выставлен 2026-08-04 у Split-Button и Toggle Group-Button одновременно: разойтись семье по набору размеров хуже, чем не иметь XL нигде

SM · 32px

MD · 40px — единственный опубликованный вариант сета

LG · 48px

XL · 56px

Состояния

Наследуются от .TGB_Parts / Secondary 61:12986 — того же мастера, что инстанцирован в макете

Default

Hover — у сегментов независимый

Pressed

Открытое меню — триггер в Active

Disabled — гаснут оба сегмента

Focus-visible — каждый сегмент отдельная остановка Tab

Иконка и счётчик

Оба необязательны — в мастере счётчик лежит скрытым

Клавиатура

Split-Button не композитный виджет — roving tabindex не применяется

Tab

Переход на сегмент действия, затем на триггер — обе обычные остановки (в отличие от ToggleGroupButton)

Enter / Space

На действии — выполнить. На триггере — открыть меню

↓

На триггере — открыть меню и встать на первый пункт

Esc

Закрыть меню, вернуть фокус на триггер

When NOT to use

Запрет + чем заменить

Все действия равнозначны по частоте — «Buttons Group» или «DropdownMenu» с обычным триггером: у Split-Button первое действие визуально главнее, и это обещание пользователю.

Выбор одного из N режимов — «ToggleGroupButton»: там сегменты взаимоисключающи и один всегда выбран, здесь выбранных нет вовсе.

Действие необратимое и опасное (удаление, перевод средств) — «Button» с интентом negative плюс «Modal» с подтверждением. Не прятать в меню и не ставить основным без подтверждения.

Меню длиннее ~7 пунктов или с вложенностью — отдельная «DropdownMenu» с явным триггером: троеточие рядом с действием не читается как «здесь ещё двенадцать вещей».

Единственное действие без альтернатив — обычный «Button»: пустой сегмент-троеточие выглядит как сломанный.

State Explorer

Интерактивный тест состояний — переключай и смотри