Определение

Button (Кнопка) — это визуальное представление действий или команд, которые пользователи могут выполнять в приложении, на веб-сайте или в программном обеспечении. Они сообщают, какие действия пользователи могут выполнять в интерфейсе. Кнопки позволяют пользователям выполнять действия и делать выбор простым щелчком мыши или касанием.

Функциональность

Идентификация

Button семантический элемент, который информирует пользователя о контексте действия.

Используйте комбинации кнопок, так, чтобы на экране было не больше одной Primary кнопки

Правильно

Неправильно

Уведомление, состояния и их количество или смена состояния

Может использоваться для обозначения новых сообщений/фильтров через счетчик, а также использовать меню

Дизайн и Стиль

Размер и Форма

Button должен быть достаточно заметным для быстрого восприятия

Цвет и Контраст

Button хорошо видим даже на разноцветных фонах. Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Текст и Иконки

Краткость текста

Используйте короткий и легко воспринимаемый текст в button.

Правильно

Неправильно

Иконки (по необходимости)

Можно включать иконки в button, а также менять их через swap на аватарки, флаги или иконки брендов для дополнительной идентификации.

Параметры

Размер

Существует 4 основных размера:

• XS – 20px
• S – 24px
• M – 32px
• L – 40px

Типы

Состояния

Анатомия

Внутренние компоненты

Для понимания анатомии входящих компонентов смотри примеры Бейдж счетчик (Badge Counter), Аватар (Avatar), Слот (Slot)