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. Призрак

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

Статусы

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

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

Цвета

Состояния

Существует 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)
если кнопки располагаются вертикально друг под другом.