Button
Figma
Button (кнопка) — элемент, который запускает действие или открывает ссылку.
Из чего состоит
  1. Кнопка
  2. Левая иконка
  3. Правая иконка
  4. Название кнопки
  5. Иконка (button icon)
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Мод (Mode)
Приоритет (Priority)
Состояние (State)
Размер (Size)
Форма (Form)
Отключаемые элементы
👁 Левая иконка (Left Icon)
👁 Правая иконка (Right Icon)
👁 Название кнопки (Text)
Редактируемые элементы
✏️ Левая иконка (Left Icon)
✏️ Правая иконка (Right Icon)
✏️ Название кнопки (Text)
✏️ Иконка кнопки-иконки (Icon)
Акцентный цвет (theme: day; state: primary)
Элементы кнопки могут быть акцентного цвета. Цвет текста фиксированный для каждого акцентного цвета.
Акцентный цвет (theme: night; state: primary)
Могут принимать акцентный цвет.
Акцентный цвет (theme: day; state: secondary)
Обводка по умолчанию — акцентный цвет Default.
Обводка, текст, иконка слева, иконка справа при ховере — акцентного “Hover” цвета, при клике — акцентного “Active” цвета.
Акцентный цвет (theme: day; state: secondary)
Обводка по умолчанию — акцентный цвет Default.
Обводка, текст, иконка слева, иконка справа при ховере — акцентного “Hover” цвета, при клике — акцентного “Active” цвета.
По ширине внешнего контейнера
Кнопка может растягиваться под внешний контейнер по ширине. Текст выравнивается по центру.
С отступами внутри
Кнопка может растягиваться от текста внутри, с учетом отступов по бокам, «обнимая» текст.
Если кнопка не входит в границы внешнего контейнера, тогда она растягивается по ширине контейнера. Текст при этом выравнивается по центру.
Текст в несколько строк
Текст кнопки растягивает кнопку с учетом отступов по бокам, сверху и снизу.
Если кнопка не входит в границы контейнера, тогда она растягивается по ширине контейнера. Текст и иконки при этом выравниваются по центру.