SplitButton | Guideline

Blue

White

Список разворачивается поверх полей формы. Максимальное кол-во видимых выпадающих пунктов - 4. Если список не влезает по высоте в экран - он выпадает сверху поля.

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

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

Внешний вид

Размеры, Шрифты

text Regular 15 px

icon — dropdownArrow.svg 20х20 рх

Blue

Состояние

Внешний вид

Цвета

Inactive

background (202, 72%, 56%, 1)

text (0, 100%, 100%, 1)

icon (0, 100%, 100%, 1)

line 1 px (0, 100%, 100%, 0,2)

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 (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)