ActionsСпецификация компонента·версия 1.5.0·Открыть в Figma

Button

BasicButton — основной элемент взаимодействия с текстовой меткой. Инициирует действие: отправку формы, подтверждение, запуск процесса. В отличие от LinkButton, не ведёт к ресурсу.

Песочница

1. Key Principles of Use

When to use

Use — для любого дискретного действия: сохранить, подтвердить, удалить, применить фильтр, перейти к следующему шагу.

Don't use:

  • Для навигации к URL — используйте LinkButton
  • Только с иконкой без текста — используйте IconButton
  • Для встроенных действий внутри полей — используйте EmbeddedButton

Core principles

  • Один Accent на контекст — несколько Accent-кнопок конкурируют за внимание
  • Label — глагол — «Сохранить», «Удалить», «Отправить»; избегайте «OK», «Да»
  • Stretching=Fixed только для явного выравнивания в сетке, не по умолчанию

2. Anatomy

┌─────────────────────────────────────────┐
│  [ContentLeft]   Label   [ContentRight] │
└─────────────────────────────────────────┘
СлотОбязательностьОписание
labelrequiredТекст кнопки. Глагол или глагольная фраза
contentLeftoptionalИконка слева от label
contentRightoptionalИконка (Icon), текстовое значение (Value) или ничего (None)
spinnerconditionalПоявляется при Loading=True

3. Variants

Figma Component Sets

Имя в FigmapxT-shirt
Button 24 XXS24XXS
BasicButton 32 XS32XS
BasicButton 40 S40S
BasicButton 48 M48M
BasicButton 56 L56L
BasicButton 64 XL64XL

Ведущий пробел в именах XS–L — известная проблема именования, не влияет на поведение.

View (визуальный стиль)

ViewНазначение
DefaultНейтральный стиль, низкий визуальный вес
AccentОсновное действие на экране
SecondaryВторостепенное действие
ClearПрозрачный фон, минимальный вес
PositiveПозитивное/подтверждающее действие
WarningДействие с риском
NegativeДеструктивное/опасное действие
DarkТёмный стиль (для светлых поверхностей)
Black / WhiteМонохромные варианты
AccentTransparentТолько в XXS: Accent с прозрачным фоном

Примечание: В Button 24 XXS есть опечатка — "Seccondary" (лишняя 'c').

Модификаторы

ПропЗначенияОписание
StretchingAuto / FixedAuto — по контенту; Fixed — на всю ширину контейнера
SpacingPacked / Space BetweenPacked — иконка вплотную к тексту; Space Between — по краям
ContentLeftTrue / FalseВключить/выключить левый контент
ContentRightNone / Value / IconТип правого контента

4. Sizes

T-shirtpxPadding HКонтекст
XXS248pxВстроенные элементы, компактные тулбары
XS3212pxТулбары, таблицы, inline-действия
S4012pxВторичные формы, карточки
M4816pxСтандартные формы — дефолт
L5616pxАкцентные CTA
XL6420pxHero-секции, touch-first

5. States

СостояниеFigma-пропОписание
default—Базовый вид
hover—Курсор над кнопкой
active/pressed—Момент нажатия
focus—Фокус клавиатуры (кольцо фокуса)
loadingLoading=TrueСпиннер, кнопка неинтерактивна
disabledDisabled=TrueНедоступна

Допустимые комбинации

КомбинацияДопустимоПримечание
hover + focus✓Tab-навигация при наведении
loading + disabled✓Блокировка во время запроса
hover + disabled✗disabled отменяет все интерактивные
loading + hover✗В loading кнопка визуально недоступна

6. Behavior

Keyboard interaction

КлавишаДействие
Tab / Shift+TabПеремещение фокуса
EnterАктивация
SpaceАктивация

Loading state

При Loading=True: лейбл заменяется спиннером, pointer-events: none, aria-busy="true". Ширина не меняется.

Touch targets

Минимальная зона — 44×44px. Для XXS и XS расширяется невидимым padding.

7. Accessibility

АтрибутЗначениеКогда
<button>—Всегда. Не заменять на <div>
aria-busy="true"—Loading=True
aria-disabled="true"—Loading=True (остаётся в tab-order)
disabled—Disabled=True — нативный атрибут
  • Контрастность текста: минимум 4.5:1 (WCAG AA)
  • Negative/Warning не передаются только цветом — нужна иконка или явный label

8. Design Tokens

Accent (основное действие)

РольSDDS Token
Фон defaultSurfaces/Default/Accent/Solid/Accent
Текст / иконкаText&Icons/Default/General/Primary (на акцентном фоне)
Фон disabledSurfaces/Default/General/Solid/Tertiary
Текст disabledText&Icons/Default/General/Tertiary

Secondary

РольSDDS Token
Фон defaultSurfaces/Default/General/Solid/Secondary
ОбводкаOutlines/Default/General/Solid/Secondary
ТекстText&Icons/Default/General/Primary

Negative

View=Negative в SDDS компонентах соответствует токенам группы Status/Error в коллекции Styles. Это разные уровни: Figma-проп называется Negative, путь токена содержит Error.

РольSDDS Token
Фон defaultSurfaces/Default/Status/Solid/Error
ТекстText&Icons/onDark/General/Primary
Нашли расхождение документации и библиотеки — напишите команде.Сообщить о расхождении