Button

Режимы отображения

Задаётся свойством mode.

• "primary" — акцентная кнопка для основных действий (например, «Сохранить», «Отправить», «Открыть»);
• "secondary" — второстепенная кнопка для важных, но не основных действий (например, «Отмена», «Редактировать»). Часто используется в паре с primary;
• "outline" — второстепенная кнопка с обводкой и средним акцентом. Подходит, когда нужно сохранить визуальную лёгкость интерфейса, или когда фон secondary сливается с фоном интерфейса/баннера;
• "tertiary" — кнопка без фона с низким акцентом для действий с минимальным влиянием на интерфейс (например, «Помощь», «Подробнее», «Справка»). Применяется, когда primary и secondary уже заданы;
• "link" — визуально как tertiary, но без фона и боковых отступов. Удобна в шапках или в ряду с элементами интерфейса, где нужен небольшой отступ между объектами.

Визуальное оформление

Цвет

Задаётся свойством appearance.

"accent"

Акцентный цвет, меняющийся в зависимости от светлой или тёмной схемы.

"accent-invariable"

Акцентный цвет, который не меняется в зависимости от светлой или тёмной темы.

"positive"

Цвет для действия подтверждения (чаще всего зелёный).

"negative"

Цвет критических действий (чаще всего красный).

"neutral"

Нейтральный цвет, который может служить альтернативным акцентным.

"overlay"

Цвет для кнопок поверх цветных элементов или фото.

Скругление

Задаётся свойством rounded.

Позволяет получить полностью скруглённую кнопку.

Размеры

Задаётся свойством size.

Значения, соответствующие каждому размеру, зависят от параметра адаптивности density. В режиме density="compact" значения каждого из размеров будут меньше, чем в режиме density="regular".

Состояния

disabled

Отключает взаимодействие с кнопкой и добавляет визуальную индикацию недоступности.

loading

Показывает индикацию загрузки вместо содержимого кнопки. Используйте, когда после нажатия запускаются длительные действия.

⚠️ Важно для доступности: при loading={true} компонент автоматически устанавливает aria-label в значение loadingLabel (по умолчанию «Загрузка…»), чтобы скринридер объявил контекст загрузки. Значение можно переопределить через loadingLabel.

Выравнивание

Задаётся свойством align.

Контент в начале/в конце

Слева и/или справа от текста можно добавить контент через свойства before и after соответственно. Чаще всего это иконки.

Рекомендации по размеру иконок:

• size="s" — 12px;
• size="m" — 16px;
• size="l" — 24px.

Для size="l" в before/after также подойдёт компонент Counter.

before/after можно использовать без children — получится кнопка только с иконкой. Такие кнопки требуют дополнительных действий для доступности — см. раздел a11y.

Доступность (a11y)

Компонент автоматически выбирает правильный HTML-тег (button по умолчанию или a при передаче href), обеспечивая базовые требования доступности.

Поддерживаются все стандартные aria-атрибуты на случай, если нужно переопределить стандартное поведение.

При одновременной передаче href и disabled VKUI не передаёт href тегу a, отключая взаимодействие. По возможности не передавайте href и disabled вместе — это не соответствует a11y.

Для кнопки только с иконкой (before/after без children) обязательно добавьте aria-label. Ещё лучше — использовать VisuallyHidden с нужным текстом: это универсальнее для ассистивных технологий.

// хорошо
<Button before={<Icon16Search />} size="m" aria-label="Найти" />
 
// ещё лучше
<Button before={<Icon16Search />} size="m">
  <VisuallyHidden>Найти</VisuallyHidden>
</Button>

disableSpinnerAnimation

Свойство disableSpinnerAnimation отключает анимацию при loading={true}.

Свойства и методы