Skip to main content

Кнопки

Кнопка используется как триггер для выполнения определенного действия. Кнопка однозначно сообщает пользователю, что произойдет после нажатия на неё.

Когда используется

Основная кнопка (primary)

  • когда необходимо обозначить ключевое или страртовое действие на странице (например, начать заполнять форму)
  • в диалоговом окне, когда интерфейс предлагает совершить те или иные альтернативные действия

Второстепенная кнопка (secondary)

  • когда компонент не должен привлекать повышенного внимания или когда место на странице ограничено для размещения, а использование ссылки не подходит
  • когда возможны два варианта действия, одно из которых ключевое и выполнено основной кнопкой (например в диалоге модального окна)

Цвета кнопок#

Контурные кнопки#

Размеры кнопок#

Кнопка с выпадающим списком#

Кнопки с иконкой#

Скругленные кнопки#

Группа кнопок#

Расположение кнопок#

Кнопка с подтверждением#

Кнопки в полях#