✅Split Button

Обзор

Split button содержит несколько команд, объединенных по смыслу. Она разделена на две части, первая часть которой выполняет основное действие, а вторая - дополнительные действия, которые можно выбрать в выпадающем списке.

Когда использовать

Используйте Split button:

• когда не хватает места для нескольких кнопок;

• когда названия действий очень длинные;

• когда действия редко используются или объединены по смыслу.

Выпадающее меню

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

Раскрывающееся меню не может быть по ширине меньше кнопки. Рекомендуется делать выпадающий список по ширине кнопки или шире на 30-40рх. Выравнивание выпадающего списка - по правому краю кнопки.

Рекомендуем описывать элемент списка в одной строке. Если текст слишком длинный, вы можете увеличить ширину выпадающего меню (сделать больше, чем ширина кнопки) или добавьте многоточие (…). Во втором случае при наведении на строку появляется всплывающая подсказка, отображающая всю строку текста.

В общем случае список открывается вниз, это ожидаемое поведение, именно вниз указывает стрелка на самой кнопке. Чтобы список не выходил за границу страницы, проследите чтобы под ним было достаточное количество места. Исключение, когда список может открываться вверх - если кнопка-меню располагается на терминальной плашке внизу страницы.

Название

Split button может содержать иконки, как у обычной кнопки. Также иконки могут быть у самых важных команд в меню:

Фокус и работа с клавиатурой

При переходе к Split button клавишей Tab кнопка получает фокус по частям. Сначала первая часть кнопки, затем - вторая.

Если нажать клавишу Enter - меню откроется и первый пункт получит фокус:

Клавиши ↓ ↑ переводят фокус между строками списка. Переход между строками не цикличен - с последней строки фокус не переходит на первую, как и с первой на последнюю. Клавиша Enter выполняет выбранное действие. Клавиша Esc закрывает меню.

Представленные типы кнопок существуют во всех видах (fill, outline, ghost).