🚧Buttons

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

Обзор

Типы кнопок

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

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

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

• Видов кнопок (Fill / Outline / Ghost)

• Статусов (Primary / Secondary / Success / Warning / Danger).

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

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

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

• Secondary (виды Fill, Outline или Ghost)

• Кнопку с индикацией Success / Warning / Danger (виды Outline или Ghost).

Confirm Dialog

Overlay

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

Panel

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

Виды

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

• Fill. С заливкой

• Outline. С обводкой

• Ghost. Призрак

Fill

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

Outline

Содержат важные действия, но не являются основным действием в приложении. Также являются более низкой альтернативой кнопкам Fill или более высокой Ghost. В состоянии покоя контурные кнопки должны отображать контур с обводкой и без заливки.

Ghost

Используются для менее выраженных действий. Не имеют контейнера и не отвлекают от близлежащего контента.

Статусы

Primary

Всегда используется для самых важных действий -- целевых

В одной группе не может находиться больше одной кнопки типа Primary.

Secondary

Вторичная кнопка всегда используется для вторичных действий:

• Действие с нейтральным результатом

• Дополнительная функциональность

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

Success

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

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

Warning

Внимание-индикация: действия, связанные с привлечением внимания, в большинстве случаев с негативным окрасом.

Danger

Опасность-индикация: необратимое или негативное по смыслу действие.

Цвета

Состояния

Существует 4 состояния кнопок:

• Default — по умолчанию (состояние покоя)

• Hover — при наведении курсора

• Pressed — в момент нажатия Focus — при переходе клавиатурой (Tab). Это состояние отсутствует в компонентах в Figma, но предусмотрено в реализации. Может быть совмещено с любым другим состоянием.

• Disabled — неактивное состояние. Для оптимизации компонентов в Figma вынесено на уровень статуса.

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

Анимация

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

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

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

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

• Первая часть - может быть только текстом, соответственно он заменяется на спиннер.

• Вторая часть (шеврон) остаётся на месте в своём состоянии (Default), так же блокируется вместе со всей кнопкой и не даёт возможности с ней взаимодействовать.

Размеры

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

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

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

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

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

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

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

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

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

• если это делает кнопку более пропорциональной по отношению к остальным элементам страницы

• если текст внутри кнопки короткий и кнопка выглядит маленькой (<120px)

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

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

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

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

Цвета