> For the complete documentation index, see [llms.txt](https://prizmds.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://prizmds.gitbook.io/documentation/components/buttons/split-button.md).

# Split Button

## <mark style="color:blue;">Обзор</mark>

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

<figure><img src="/files/fB3plkOvc7h6mijQ2JlV" alt="" width="204"><figcaption></figcaption></figure>

### <mark style="color:blue;">Когда использовать</mark>

Используйте Split button:&#x20;

* когда не хватает места для нескольких кнопок;&#x20;
* когда названия действий очень длинные;&#x20;
* когда действия редко используются или объединены по смыслу.

### <mark style="color:blue;">Выпадающее меню</mark>

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

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

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

<figure><img src="/files/Kxm5llc7iLiR2PiJM5Lf" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/NZP6mAX7n63DhiBBIhPU" alt=""><figcaption></figcaption></figure>

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

### Название

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

<figure><img src="/files/Biu04lD6O46z68irHBT2" alt="" width="255"><figcaption></figcaption></figure>

### <mark style="color:blue;">Фокус и работа с клавиатурой</mark>

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

<figure><img src="/files/9PgBqEaP3EhdLqQ4hGN3" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/hx8VYjaxbapKI1H9doPk" alt="" width="231"><figcaption></figcaption></figure>

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

{% hint style="info" %}
Представленные типы кнопок существуют во всех видах (fill, outline, ghost).
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://prizmds.gitbook.io/documentation/components/buttons/split-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.