Кнопки действия

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

Large Button Десктоп Телефон Планшет
X1 70 50 50
X2 48 20 25
Medium Button Десктоп Телефон Планшет
X1 70 50 50
X2 48 20 25
Small Button Десктоп Телефон Планшет
X1 42 Medium button Medium button
X2 20 Medium button Medium button

 

 

Кнопки имеют скругление углов радиусом 4px.

 

На смартфоне кнопка может растягиваться по рабочей ширине.

 
 
 
 

 

Large Десктоп Телефон Планшет
X1 70 50 50
X2 48 20 25
Medium Десктоп Телефон Планшет
X1 70 50 50
X2 48 20 25
Small Десктоп Телефон Планшет
X1 42 Medium button Medium button
X2 20 Medium button Medium button

 

 

Кнопки имеют скругление углов радиусом 4px.

 

На смартфоне кнопка может растягиваться по рабочей ширине.

 
 
 
 


Кнопки с иконками

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

 

 

Большая второстепенная

кнопка — Button Large.

 

Средняя второстепенная

кнопка — Button Medium.

 

Малая второстепенная

кнопка — Button Small.

 

Элементы внутри кнопок с иконками выравниваются по единым правилам, вне зависимости от того, какая иконка используется, с какой стороны от текста находится. Ширина иконки не зависит от отступов. В остальном поведение кнопок зависит от того, какой тип кнопки используется.

 

 

Десктоп Телефон  Планшет
X1 large button 20  35   40
X1 medium button 12  15  20 
X1 small button 10  нет  нет 
X2 large button 48  20  25 
X2 medium button 25  15  20 
X2 small button 20  нет  нет 

Высота иконки large button

Равна размеру шрифт

Равна размеру шрифт

Равна размеру шрифт

Высота иконки medium button

Равна размеру шрифт

Равна размеру шрифт

Равна размеру шрифт

Высота иконки small button

Равна размеру шрифт

Равна размеру шрифт

Равна размеру шрифт

 

Заливка иконки на белом фоне

Заливка иконки на синем фоне

HEX: #565656 HEX: #FFFFFF
RGB: 86,86,86 RGB: 255,255,255

 

Кнопки многострочные

Большая второстепеннаякнопка — Button Large. 

Рамер шрифт: 24px;
line-height: 28px

Средняя второстепенная

кнопка — Button Medium.
Рамер шрифт: 17px;
line-height: 24px

Малая второстепенная

кнопка — Button Small.
Рамер шрифт: 17px;
line-height: 24px



 

 

 

 

Десктоп Телефон  Планшет
X1 large button 20  35   40
X1 medium button 12  15  20 
X1 small button 10  нет  нет 
X2 large button 48  20  25 
X2 medium button 25  15  20 
X2 small button 20  нет  нет 
X3 large button 20 15 15
X3 medium button 12 15 15
X3 small button 13 нет нет

Высота иконки large button

Равна размеру шрифт

Равна размеру шрифт

Равна размеру шрифт

Высота иконки medium button

Равна размеру шрифт

Равна размеру шрифт

Равна размеру шрифт

Высота иконки small button

Равна размеру шрифт

Равна размеру шрифт

Равна размеру шрифт

 

 

Маленькие кнопки на смартфоне

На смартфоне маленькие кнопки и вкладки чаще всего заменяются строками.

Поле с дополнительной
информацией. Переход
на вложенную страницу
или открытие всплывающего окна.


Поле с дополнительной
информацией
и возможностью выбора.


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

 
   

 

X1 X2 X3 X4 X5 X6 X7 X8
 16 10 15 8 20  16  20  12

 


Заливка
HEX: #FFFFFF
RGB: 255,255,255 


Заливка
HEX: #F5F5F5
RGB: 245,245,245


Заливка
HEX: #E73A3D
RGB: 231,58,61

Обводка
HEX: #CDD1D4
RGB: 205,209,212

Обводка

HEX: #CDCFD1
RGB: 205,207,209

 

 

Лайткуб