Button link
Figma
Button link (кнопка-ссылка) — элемент, который запускает действие или открывает ссылку.
Из чего состоит
  1. Кнопка
  2. Левая иконка
  3. Правая иконка
  4. Название кнопки
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Состояние (State)
Размер (Size)
Режим цвета (Color Mode)
Жирность текста (Font Width)
Отключаемые элементы
👁 Левая иконка (Left Icon)
👁 Правая иконка (Right Icon)
👁 Название кнопки (Text)
Редактируемые элементы
✏️ Левая иконка (Left Icon)
✏️ Правая иконка (Right Icon)
✏️ Название кнопки (Text)
Акцентный цвет (theme: day)
Иконка слева, иконка справа при “Color Mode: Different” — акцентный цвет Default/Hover/Active (зависит от состояния).
Текст, иконка слева, иконка справа при “Color Mode: Same”) — акцентный цвет Default/Hover/Active (зависит от состояния).
Если акцентный цвет "Green" или "Yellow", то цвет иконок (или текста) по умолчанию вместо “Default” всегда "Active", независимо от “Color Mode”
Акцентный цвет (theme: night)
Иконка слева, иконка справа при “Color Mode: Different” — акцентный цвет Default/Hover/Active (зависит от состояния).
Текст, иконка слева, иконка справа при “Color Mode: Same”) — акцентный цвет Default/Hover/Active (зависит от состояния).
Если акцентный цвет "Green" или "Yellow", то цвет иконок (или текста) по умолчанию вместо “Default” всегда "Active", независимо от “Color Mode”
С отступами внутри
Кнопка-ссылка может растягиваться от текста внутри, с учетом отступов до иконок по бокам, «обнимая» текст.
Если кнопка-ссылка не входит в границы внешнего контейнера, тогда она растягивается по ширине контейнера. Текст при этом выравнивается по центру.
Текст в несколько строк
Текст кнопки растягивает кнопку с учетом отступов по бокам, сверху и снизу.
Если кнопка не входит в границы контейнера, тогда она растягивается по ширине контейнера. Текст и иконки при этом выравниваются по центру.