Кнопки показывают действия, которые пользователь может выполнить. Иерархия: Primary → Critical → Secondary → Tertiary. Четыре размера, четыре семантики, четыре визуальных стиля.
Варианты
5 вариантов
Button / Solid
Atoms · Primary action
Stable
Акцентная кнопка с заливкой. Primary (Brand), Critical (Negative), Positive, Neutral.
SM · MD · LG · XLBrand · Neutral · Positive · Negative5 states76 tokens
SIZE_BASED · Dark ✓
Button / Outline
Atoms · Secondary action
Stable
Кнопка с обводкой, прозрачный фон. Secondary-действия и альтернативы Primary.
SM · MD · LG · XLNeutral4 states
SIZE_BASED · Dark ✓
Button / Ghost
Atoms · Tertiary action
Stable
Кнопка без фона и обводки. Повторяющиеся Tertiary-действия, карточки, таблицы.
SM · MD · LG · XLNeutral · Info4 states
SIZE_BASED · Dark ✓
Button / Soft
Atoms · Primary-Soft action
Stable
Кнопка с мягкой заливкой. Менее акцентная альтернатива Solid, сохраняет иерархию.
SM · MD · LG · XLNeutral4 states
SIZE_BASED · Dark ✓
Button / Icon Only
Atoms · Icon action
Stable
Квадратная кнопка только с иконкой. Вариант Button в Figma. Тулбары, панели действий. Требует aria-label.
SM · MD · LG · XLSolid · Outline · Ghostaria-label required
SIZE_BASED · квадрат h×h
Иерархия кнопок
4 уровня важности
1
Primary
Brand · Solid
Главное действие страницы. Один Primary на экран. Сильный акцент — используй редко.
2
Critical
Negative · Solid
Деструктивные действия: удаление, сброс. Всегда требует диалога подтверждения.
3
Secondary
Neutral · Outline
Дополнительные действия на том же экране. Меньший визуальный вес, чем Primary.
4
Tertiary
Neutral · Ghost
Повторяющиеся и второстепенные действия. В карточках продуктов и таблицах.
Варианты и состояния
Hover для интерактивного preview
Вариант
Default
Hover
Pressed
Active
Disabled
Neutral · SolidPrimary · Neutral
Brand · SolidPrimary · Brand
Positive · SolidPrimary · Positive
Negative · SolidPrimary · Negative
Neutral · SoftPrimary-Soft
Neutral · OutlineSecondary
Neutral · GhostTertiary
Info · GhostTertiary · Info
Размеры
SM · MD · LG · XL
SM · 32px · 14px
MD · 40px · 16px
LG · 48px · 16px
XL · 56px · 18px
Свойство
SM
MD
LG
XL
Height
32px
40px
48px
56px
Outer px
8px
10px
12px
16px
Label px
6px
8px
10px
12px
Font
14px
16px
16px
18px
Radius
8px
12px
12px
16px
Gap
4px
6px
8px
10px
Icon
16px
20px
24px
24px
Применение
Таблицы, дашборды
Базовый
Расширенный
Лендинг / акцент
Анатомия
4 элемента
① Контейнер
② Иконка (декор)
③ Лейбл
④ Иконка (функция)
1
Контейнер
Кликабельная область с паддингами, скруглением и фоном. Определяет высоту, ширину и все интерактивные состояния.
2
Иконка слева
Декоративная роль — усиливает распознавание. Добавляй, только если у действия есть общепризнанная графическая ассоциация.
3
Лейбл
Обязательный элемент. Глагольная форма, с заглавной буквы. Отвечает на вопрос «Что сделать?».
4
Иконка справа
Функциональная роль — выпадающее меню или обозначение перехода (шеврон). Не декоративная.
Правило деструктивных кнопок
Negative intent
Осторожно
Деструктивные кнопки — использовать экономно
Кнопки «Удалить», «Сбросить», «Очистить» следует использовать экономно. Чтобы предотвратить потерю данных:
Размещай в местах, снижающих риск случайного нажатия — не рядом с Primary
Всегда предупреждай через диалоговое окно для необратимых действий
Сочетай цвет с однозначной текстовой меткой и иконкой, где уместно
Никогда не используй только иконку для деструктивного действия
Не более одной–двух high-accent деструктивных кнопок на экран
По возможности предоставляй возможность отменить
Icon Only
Вариант Button · Figma: Button/Icon Only/Solid
SM · 32×32
MD · 40×40
LG · 48×48
XL · 56×56
Вариант
Neutral
Brand
Negative
Positive
Disabled
SolidPrimary action
OutlineSecondary action
—
—
—
GhostTertiary action
—
—
—
Figma: Icon Only — вариант компонента Button, не отдельный компонент.
Ширина = высоте (h×h), padding сбрасывается до 0. Максимум 3 иконки подряд — остальное скрывать за «...». Обязателен aria-label или title для доступности.
Правила иконок
С текстом и без текста
С текстом
Иконка усиливает действие
Добавляй иконку, если действие имеет общепризнанную графическую ассоциацию. Иконка усиливает распознавание, но не заменяет подпись.
Только иконка
Icon Only — абсолютно ясные действия
Используй без текста только если смысл иконки понятен без пояснений. Обязателен tooltip. Максимум 3 иконки в ряд — остальное убирать в меню «...».
Названия кнопок
Регистр · Глагольная форма
Правила
С заглавной буквы, глагол
Текст кнопки всегда с заглавной буквы. Глагол, отвечающий на вопрос «Что сделать?».
Краткое уточнение при необходимости: «Отправить на согласование»
Если интерфейс задаёт вопрос — прямой ответ: «Принимаю условия»
Нельзя сокращать, если текст не помещается — нужно переформулировать
Запрещено
Не допускается
Строчные буквы («сохранить»)
Капслок («СОХРАНИТЬ»)
Невнятные метки («ОК», «Да»)
Сокращения при нехватке места
Манипулятивный контраст между кнопками
Правильно
НайтиСохранитьСоздатьОтправить счетПринимаю условия
Неверно
сохранитьНАЙТИOKДаНажмите здесь
Ширина кнопок
Hug content · Fill container
По умолчанию
Hug content
Кнопка оборачивает содержимое. Растёт только при наборе текста или добавлении иконок. Отступы фиксированы — изменять вручную запрещено.
Контейнер
Fill container
Кнопка растягивается на всю доступную ширину родительского блока. Применяется в формах и мобильных экранах.
Работа с клавиатурой
WCAG 2.2 · Level AA
Клавиша
Действие
Tab
Кнопка получает фокус. В группе — крайняя левая получает фокус первой.
Tab (повтор)
Фокус переходит к следующей кнопке справа, затем к следующему интерактивному элементу.
ShiftTab
Возврат фокуса в обратном порядке.
Enter
Клик по кнопке в фокусе.
Состояние фокуса — Info/info-800 · double ring 1px+2px