Button

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

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

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

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

Цвет

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

"accent"

Значение задаёт кнопке акцентный цвет, который может меняться в зависимости от светлой или тёмной схемы.

"accent-invariable"

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

"positive"

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

"negative"

Значение задаёт кнопке цвет критических действий (чаще всего красный).

"neutral"

Значение задаёт кнопке нейтральный цвет, который также может являться альтернативным акцентным цветом кнопки.

"overlay"

Значение цвета используется для кнопок, располагающихся поверх цветных элементов или фото.

Скругление

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

Свойство позволяет переопределить радиус скругления для возможности получить полностью скругленную кнопку.

Размеры

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

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

Состояния

disabled

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

loading

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

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

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

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

В компоненте доступна возможность добавления дополнительного контента слева и/или справа от текста, задаётся свойством before и after соответственно. Наиболее частый вариант использования свойств before/after - иконки.

Следует руководствоваться следующими правилами:

• для кнопок size="s" рекомендуется использовать иконки размером 12px;
• для кнопок size="m" рекомендуется использовать иконки размером 16px;
• для кнопок size="l" рекомендуется использовать иконки размером 24px.

Также для кнопок size="l" можно использовать компонент Counter в before/after.

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

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

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

Также компонент поддерживает все стандартные aria-атрибуты, если вам необходимо переопределить стандартное поведение.

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

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

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

disableSpinnerAnimation

Компонент поддерживает свойство disableSpinnerAnimation, которое позволяет отключить анимацию при указании loading={true}.

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