Button

О элементе

Button default

	Blue	White
Default
Small

Default Button blue

Кнопка действия. Используются для акцентирования внимания на действие. (Ввести ограничения на кол-во символов). Обычно находится внутри форм, диалогов, панелей или страниц. Используется для продолжение сценария пользователя.

Название кнопки пишется с заглавной буквы и должно описывать действие, которое будет выполнять кнопка (используйте глагол). Используйте краткие, конкретные, не требующие пояснений названия, одно слово. Название кнопки должно умещаться в одну строку.

Используйте не более двух кнопок одновременно, например «Принять» и «Отмена». Чтобы предоставить пользователю больше действий – используйте Dropdown Button или Split Button.

Не используйте

• Названия, как «Ок», особенно в случае ошибки

• Для перехода в другое место, вместо этого используйте ссылку

Default Button White

Второстепенная кнопка. Используется для прекращения сценария пользователя или переход на альтернативные сценарии.

Button with icon

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

Наиболее частое применение – это иконка «+», но после нее в кнопке указывается существительно. Т.е. мы хотим сказать «Добавить документе», но заменяя глагол получаем «+ документ».

Как правильно написать текст – читайте в текстовом гайде

Анатомия

Вид	Внешний вид	Размеры, Шрифты
Default		text Regular 15 px
Left icon		text Regular 15 px icon 20x20 px
Small		text Regular 13 px

Разновидности

	Blue	White
Default
With icon left
Small

Состояния

Blue Button

Состояние	Внешний вид	Цвета
Inactive		background (202, 72%, 56%, 1) text (0, 100%, 100%, 1) icon (0, 100%, 100%, 1)
Hover		background (202, 84%, 60%, 1)
Click		annimation (202, 88%, 68%, 1)
Select		background (202, 88%, 68%, 1)
Disable		background (0, 0%, 92%, 1) text (0, 100%, 100%, 1) icon (0, 100%, 100%, 1)
Loading		icon 20х20 рх (0, 100%, 100%, 1)

White Button

Состояние	Внешний вид	Цвета
Inactive		background (0, 0%, 100%, 1) text (0, 0%, 20%, 1) stroke 1 px(0, 0%, 84%, 1) icon (0, 0%, 68%, 1)
Hover		background (0, 0%, 96%, 1) text (0, 0%, 20%, 1) stroke (0, 0%, 84%, 1) icon (0, 0%, 36%, 1)
Click		annimation (0, 0%, 92%, 1)
Sellect		background (0, 0%, 92%, 1) text (0, 0%, 20%, 1) stroke (0, 0%, 84%, 1) icon (0, 0%, 36%, 1)
Disable		background (0, 0%, 100%, 1) text (0, 0%, 84%, 1) stroke (0, 0%, 92%, 1) icon (0, 0%, 92%, 1)
Loading		icon 20х20 рх (0, 0%, 36%, 1)

Элемент в Storybook