Всегда используется для самых важных действий -- целевых
В одной группе не может находиться больше одной кнопки типа Primary.
Buttons
Last updated
Was this helpful?
Last updated
Was this helpful?
Кнопка (Button) - базовый элемент интерфейса компьютерных программ. Ее принцип действия и вид аналогичны кнопке в технике: при клике на нее происходит программно-связанное с нажатием действие, либо событие.
Правила визуальной иерархии (виды, статусы), расположения и прочиее действуют для 3 основных типов кнопок (подробнее типы описаны в разделе ниже):
В случае использования стека кнопок самое главное - установить между ними визуальную иерархию. Визуальная иерархия задается при помощи:
Видов кнопок (Fill / Outline / Ghost)
Статусов (Primary / Secondary / Success / Warning / Danger).
Важно объединять кнопки в логические группы. Порядок кнопок внутри групп определяется расположением группы, использованием и важностью кнопок внутри нее.
Не используйте слишком много призывов к действию - это будет сбивать с толку пользователей. В сочетании с Primary-кнопкой можно использовать:
Secondary (виды Fill, Outline или Ghost)
Кнопку с индикацией Success / Warning / Danger (виды Outline или Ghost).
Во всех оверлеях “Кнопка в контексте закрыть / завершить процесс” - Secondary-Ghost.
Внутри компонента 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)
если кнопки располагаются вертикально друг под другом.
L -- используется в контентной области виджета
M & S -- в панели
