UI Components
Buttons, inputs, badges, and more — your palette applied to every building block
Alerts
| Solid | Soft | |
|---|---|---|
Primary | Update available | Update available |
Primary#9A94DE
Solid
Update available
Soft
Update available
Callouts
| Solid | Soft | Surface | Outline | |
|---|---|---|---|---|
Primary | Got feedback? We'd love to know what you think. | Got feedback? We'd love to know what you think. | Got feedback? We'd love to know what you think. | Got feedback? We'd love to know what you think. |
Primary#9A94DE
Solid
Got feedback?
We'd love to know what you think.
Soft
Got feedback?
We'd love to know what you think.
Surface
Got feedback?
We'd love to know what you think.
Outline
Got feedback?
We'd love to know what you think.
Badges
| Solid | Soft | Surface | Outline | |
|---|---|---|---|---|
Primary | New | New | New | New |
Primary#9A94DE
Solid
New
Soft
New
Surface
New
Outline
New
Avatars
| Solid | Soft | Solid Gradient | Soft Gradient | |
|---|---|---|---|---|
Primary | E EV  | E EV | E EV | E EV |
Primary#9A94DE
Solid
E
EV
Soft
E
EV
Solid Gradient
E
EV
Soft Gradient
E
EV
Progress
| Solid | Soft | |
|---|---|---|
Primary | Progress55% | Progress55% |
Primary#9A94DE
Solid
Progress55%
Soft
Progress55%
Buttons
| Modern | Classic | Solid | Soft | Surface | Outline | |
|---|---|---|---|---|---|---|
Primary |
Primary#9A94DE
Modern
Classic
Solid
Soft
Surface
Outline
Form Controls
| Solid | Soft | |
|---|---|---|
Primary |
Primary#9A94DE
Solid
Soft
Inputs
| Default | Focus | |
|---|---|---|
Primary | Placeholder | Placeholder Helper text |
Primary#9A94DE
Default
Placeholder
Focus
Placeholder
Helper textLinks
| Inline | |
|---|---|
Primary | Visit the documentation to learn more about the color API. |
Primary#9A94DE
Inline
Visit the documentation to learn more about the color API.
Tabs
| Underline | |
|---|---|
Primary | Account Orders Settings Notif. |
Primary#9A94DE
Underline
Account
Orders
Settings
Notif.