Усі атоми бібліотеки
Кожен атом — мінімум прикладів варіантів / розмірів / станів. Тёмна L1-підкладка під рядами щоб flat-тонування правильно читалося. Невідповідності канону позначити очима — і виправити.
01
Display
Невелика інформація — статус, мітка, теги, числа.
Badge · variantssolid / subtle / outline / ghost
solidsubtleoutlineghost
Badge · sizesxs · sm · md · lg · xl
xssmmdlgxl
blueslateemeraldamberroseorangevioletpinktealindigodark
Badge · 11 tuned huessubtle
blueslateemeraldamberroseorangevioletpinktealindigodark
blueslateemeraldamberroseorangevioletpinktealindigodark
StatusPill · semanticinfo / success / warning / error / neutral
blueemeraldamberroseslate
Money · UA-localeUAH / USD / EUR · positive / negative / zero
12 480,00 ₴-1 280,50 ₴0,00 ₴250,00 USD4 099,99 EUR
02
Forms · paper-hole
Усе, що приймає введення: формула shadow-paper-hole одна на сімейство.
Input · statesdefault · invalid · disabled
Input · sizesxs · sm · md · lg
VIPalergy:nutspreferred-master:Anna
03
Actions · raised
Tactile 3D-кнопка — еталон фізичного градієнта. 11 tuned hues.
Button · variantssolid · soft · subtle · outline · ghost
Button · sizesxs · sm · md · lg · xl
04
Loading
Indeterminate / determinate стани очікування.
05
Communication · semantic
Banner / InlineMessage / Toast — закритий semantic набір (info / success / warning / error / neutral). Hue вільно не розширюються.
Info
Нейтральне повідомлення.
Success
Документ збережено.
Warning
Період майже закрито.
Error
Не вдалося провести проводку.
Neutral
Інформаційний фон.
Звичайне повідомлення.
Усе гаразд.
Перевірте дані перед збереженням.
Поле обов'язкове.
Підказка.
Toast · triggerToastProvider у layout • semantic only
06
Utility
Розділювачі, підказки.