> 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.md).

# Buttons

Кнопка (Button) - базовый элемент интерфейса компьютерных программ. Ее принцип действия и вид аналогичны кнопке в технике: при клике на нее происходит программно-связанное с нажатием действие, либо событие.

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

### Типы кнопок

Правила визуальной иерархии (виды, статусы), расположения и прочиее действуют для 3 основных типов кнопок (подробнее типы описаны в разделе ниже):

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fy6vQqTB1W8P5lfMKPw1j%2FFrame%2023476826.png?alt=media&amp;token=51544b2e-ca58-4120-9296-6f11942c3e52" alt=""><figcaption></figcaption></figure>

### Визуальная иерархия

В случае использования стека кнопок самое главное - установить между ними визуальную иерархию. Визуальная иерархия задается при помощи:&#x20;

* Видов кнопок (Fill / Outline / Ghost)
* Статусов (Primary / Secondary / Success / Warning / Danger).

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FAjHr8UPvP3LWlbaREQfR%2FFrame%2023476827.png?alt=media&amp;token=725407c8-5360-4acf-8846-f6a595602dc6" alt="" width="563"><figcaption></figcaption></figure>

### Порядок расположения кнопок

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

Не используйте слишком много призывов к действию - это будет сбивать с толку пользователей. В сочетании с Primary-кнопкой можно использовать:

* Secondary (виды Fill, Outline или Ghost)&#x20;
* Кнопку с индикацией Success / Warning / Danger (виды Outline или Ghost).

#### Confirm Dialog

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F2prYg3rLrX5oKCgtEQ8u%2FFrame%2023476828.png?alt=media&amp;token=23701c2e-cbac-4858-a9bf-96b800b9a2c8" alt=""><figcaption></figcaption></figure>

#### Overlay

Во всех оверлеях “Кнопка в контексте закрыть / завершить процесс” - Secondary-Ghost.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FbVC03quTF5F20RfbG6Rh%2FFrame%2023476829.png?alt=media&amp;token=9de4dae7-893b-4ecb-89f5-322a5260d842" alt=""><figcaption></figcaption></figure>

#### Panel

Внутри компонента Panel порядок кнопок - как в Overlay:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F8QvL0xMYYHQOzgBt5Rgj%2FFrame%2023476830.png?alt=media&amp;token=1e3ac952-3129-4665-b2e0-b2a095a2fc67" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Виды</mark>

В дизайн-системе заложены 3 основных вида кнопок:&#x20;

* Fill. С заливкой&#x20;
* Outline. С обводкой&#x20;
* Ghost. Призрак

{% tabs %}
{% tab title="Fill" %}
Акцентируют внимание пользователя на себе. Содержат действия, которые являются основными.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FtWY8huaMevZH9GGQ6ZZF%2FFrame%2023476831.png?alt=media&amp;token=f8e1b853-6ce9-46f8-93bf-5fbae659335f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Outline" %}
Содержат важные действия, но не являются основным действием в приложении. Также являются более низкой альтернативой кнопкам Fill или более высокой Ghost. В состоянии покоя контурные кнопки должны отображать контур с обводкой и без заливки.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FV0Av8QRNSQv7a8lYSQzv%2FFrame%2023476834.png?alt=media&amp;token=d44778bc-9097-4a7a-a977-260af1aba778" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Ghost" %}
Используются для менее выраженных действий. Не имеют контейнера и не отвлекают от близлежащего контента.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FkZORVUVmLFdVkjTMic9g%2FFrame%2023476835.png?alt=media&amp;token=a4ed03fa-5734-4867-9744-734cbd08d220" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## <mark style="color:blue;">Статусы</mark>

{% tabs %}
{% tab title="Primary" %}
Всегда используется для самых важных действий -- целевых

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F6XRmB1KvSt9hAmnppScr%2FFrame%2023476836.png?alt=media&amp;token=076598e0-388e-4e41-a738-a6994bedb106" alt="" width="375"><figcaption></figcaption></figure>

В одной группе не может находиться больше одной кнопки типа Primary.&#x20;
{% endtab %}

{% tab title="Secondary" %}
Вторичная кнопка всегда используется для вторичных действий:&#x20;

* Действие с нейтральным результатом
* Дополнительная функциональность

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FHCnfKb8jaaDGzNRvy4kC%2FFrame%2023476837.png?alt=media&amp;token=639e415d-404d-4393-812d-dc83b4d70029" alt="" width="375"><figcaption></figcaption></figure>

Несколько вторичных действий могут быть рядом друг с другом.
{% endtab %}

{% tab title="Success" %}
Успех-индикация имеет позитивную окраску, что положительно влияет на эмоциональное состояние пользователя. Используйте ее, когда хотите “наградить” пользователя за долгий путь к цели / поощрить за результаты. действие приведет к позитивному для пользователя результату.

Например: получить вознаграждение завершить процесс согласиться.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FL0QSjz7vYPXqIjn8ljee%2FFrame%2023476838.png?alt=media&amp;token=b5ad40e7-6b08-4786-99d1-b57b410cb691" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Warning" %}
Внимание-индикация: действия, связанные с привлечением внимания, в большинстве случаев с негативным окрасом.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Ffgc4fSVUVxR1sTTEw4vH%2FFrame%2023476839.png?alt=media&amp;token=94e43be8-d99d-45ee-828d-18257dd1e650" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Danger" %}
Опасность-индикация: необратимое или негативное по смыслу действие.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fj1joYTWJqxvkX1IPMdVV%2FFrame%2023476840.png?alt=media&amp;token=86016f78-dfed-4e65-ac80-a294f7442f7d" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## <mark style="color:blue;">Состояния</mark>

Существует 4 состояния кнопок:&#x20;

* Default — по умолчанию (состояние покоя)&#x20;
* Hover — при наведении курсора&#x20;
* Pressed — в момент нажатия Focus — при переходе клавиатурой (Tab). Это состояние отсутствует в компонентах в Figma, но предусмотрено в реализации. Может быть совмещено с любым другим состоянием.&#x20;
* Disabled — неактивное состояние. Для оптимизации компонентов в Figma вынесено на уровень статуса.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FDlU57IM2Ri07cFb2jVxS%2FFrame%2023476842.png?alt=media&amp;token=49dd7d84-8968-432c-813a-62645906936e" alt="" width="563"><figcaption></figcaption></figure>

Так же у кнопки Ghost существует состояние Active, которое значит, что в данный момент кнопка включена. Визуально она полностью совпадает с состоянием Pressed.

### Анимация

На время выполнения действия на кнопке можно размещать спиннер. При этом кнопка блокируется в состоянии Pressed и с ней никак нельзя взаимодействовать. Текст кнопки заменяется на спиннер, а ширина - остаётся неизменной.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fgv5JHbU1vcralX7t96qk%2FFrame%2023476844.png?alt=media&amp;token=bd806b60-f652-42d1-9182-e91e85805c5b" alt="" width="563"><figcaption></figcaption></figure>

Если в кнопке есть иконка, спиннер замещает её.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FE7cU5fNwUy9BjiDlunTt%2FFrame%2023476845.png?alt=media&amp;token=0b548593-364b-40e0-8bd4-a2811b64d9a2" alt="" width="563"><figcaption></figcaption></figure>

Такое поведение распространяется на все виды кнопок - fill, outline, ghost. И типы - Text button и Icon button.

Split button делится на 2 части:

* Первая часть - может быть только текстом, соответственно он заменяется на спиннер.&#x20;
* Вторая часть (шеврон) остаётся на месте в своём состоянии (Default), так же блокируется вместе со всей кнопкой и не даёт возможности с ней взаимодействовать.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FfqHKqN6pLqJt5arAGoX8%2FFrame%2023476846.png?alt=media&amp;token=bb28a78a-d9cb-4332-82c1-35b2b0cf2054" alt="" width="563"><figcaption></figcaption></figure>

## <mark style="color:blue;">Размеры</mark>

### Внешние размеры

В случае, когда кнопка используется в совокупности с формами ввода, их высоты должны соответствовать друг другу. Для Inner-форм ввода используется размерный ряд: L и M, а для Outer — L, M и S. Их высота не совпадает между собой в разных видах:

|       | L     | M     | S     |
| ----- | ----- | ----- | ----- |
| Inner | 44 px | 36 px |       |
| Outer | 40 px | 32 px | 24 px |

Таким образом, в нашей ДС предусмотрены следующие размеры кнопок:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FryriMEf0odpceobTbAUP%2FFrame%2023476849.png?alt=media&amp;token=283461c9-801a-42b8-b386-589719fb5320" alt="" width="563"><figcaption></figcaption></figure>

Пример использования кнопок с формами ввода:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FJPeUgNLFvff9q03sSSI2%2FFrame%2023476848.png?alt=media&amp;token=23f1b187-d9ad-4531-ae95-1715552c65a4" alt="" width="563"><figcaption></figcaption></figure>

<table><thead><tr><th width="142.0625">Элемент</th><th>Значение Inner</th><th>Значение Outer</th></tr></thead><tbody><tr><td>Текст</td><td>14px (кегль: Semi Bold)</td><td>L,M-size: 14px (кегль: Semi Bold)
<br>S-size: 12px (кегль: Semi Bold)</td></tr><tr><td>Иконка</td><td>16px * 16px</td><td>16px * 16px</td></tr><tr><td>Кнопка</td><td>Height: 44px/36px
<br>Border: 1px (solid) (outline; default)<br>Border-radius: 2px (outline; default)<br>Focus border: 2px<br>Focus border-radius: 2px</td><td>Height: 40px/32px/24px
<br>Border: 1px (solid) (outline; default)<br>Border-radius: 2px (outline; default)
<br>Focus border: 2px<br>Focus border-radius: 2px</td></tr></tbody></table>

### Внутренние размеры

Внутренние отступы от текста по высоте зависят от выбранного размера:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FwAEn9YtEqv4IXH17QcIR%2FFrame%2023476847.png?alt=media&amp;token=5110c298-d30b-491d-bc8f-3027c11f9e09" alt="" width="563"><figcaption></figcaption></figure>

Ширина кнопки задается размером текста внутри нее и отступами в 16 пикселей (кроме варианта размера S, в котором внутренние отступы по ширине от текста = 8px). Нельзя произвольно уменьшать отступы:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FmnkkK3ETIbzTeXgf4xc9%2FFrame%2025825.png?alt=media&amp;token=fdcef165-1345-427f-a6dd-1e8e8632aa98" alt="" width="252"><figcaption></figcaption></figure>

Рекомендуемая минимальная ширина кнопки 120px.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FbllQKF78IGdg1T7wWOzh%2FFrame%202582%D1%8F%D1%87%D1%8F5.png?alt=media&amp;token=399c1b8f-118f-45d9-a950-fffb4930b6c4" alt="" width="435"><figcaption></figcaption></figure>

Увеличивать отступы можно:&#x20;

* если это делает кнопку более пропорциональной по отношению к остальным элементам страницы
* если текст внутри кнопки короткий и кнопка выглядит маленькой (<120px)
* если кнопки располагаются вертикально друг под другом.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F0bbprnpIvfbx7steODY3%2FFrame%2025%D1%8F%D1%87%D0%B2%D1%8F%D1%87825.png?alt=media&amp;token=55237726-526e-42de-bd5e-3be26f815a4f" alt="" width="563"><figcaption></figcaption></figure>

### Правила использования размеров

**L** -- используется в контентной области виджета&#x20;

**M & S** -- в панели