UI Components
Buttons, inputs, badges, and more — your palette applied to every building block
Alerts
| Solid | Soft | |
|---|---|---|
primary | Update available | Update available |
secondary | Update available | Update available |
tertiary | Update available | Update available |
accent | Update available | Update available |
surface | Update available | Update available |
highlight | Update available | Update available |
neutral | Update available | 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. |
secondary | 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. |
tertiary | 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. |
accent | 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. |
surface | 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. |
highlight | 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. |
neutral | 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. |
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
We'd love to know what you think.
Badges
| Solid | Soft | Surface | Outline | |
|---|---|---|---|---|
primary | New | New | New | New |
secondary | New | New | New | New |
tertiary | New | New | New | New |
accent | New | New | New | New |
surface | New | New | New | New |
highlight | New | New | New | New |
neutral | New | New | New | New |
Avatars
| Solid | Soft | Solid Gradient | Soft Gradient | |
|---|---|---|---|---|
primary | E EV  | E EV | E EV | E EV |
secondary | E EV | E EV | E EV | E EV |
tertiary | E EV | E EV | E EV | E EV |
accent | E EV | E EV | E EV | E EV |
surface | E EV | E EV | E EV | E EV |
highlight | E EV | E EV | E EV | E EV |
neutral | E EV | E EV | E EV | E EV |
Progress
| Solid | Soft | |
|---|---|---|
primary | Progress55% | Progress55% |
secondary | Progress55% | Progress55% |
tertiary | Progress55% | Progress55% |
accent | Progress55% | Progress55% |
surface | Progress55% | Progress55% |
highlight | Progress55% | Progress55% |
neutral | Progress55% | Progress55% |
Buttons
| Modern | Classic | Solid | Soft | Surface | Outline | |
|---|---|---|---|---|---|---|
primary | ||||||
secondary | ||||||
tertiary | ||||||
accent | ||||||
surface | ||||||
highlight | ||||||
neutral |
Form Controls
| Solid | Soft | |
|---|---|---|
primary | ||
secondary | ||
tertiary | ||
accent | ||
surface | ||
highlight | ||
neutral |
Inputs
| Default | Focus | |
|---|---|---|
primary | Placeholder | Placeholder Helper text |
secondary | Placeholder | Placeholder Helper text |
tertiary | Placeholder | Placeholder Helper text |
accent | Placeholder | Placeholder Helper text |
surface | Placeholder | Placeholder Helper text |
highlight | Placeholder | Placeholder Helper text |
neutral | Placeholder | Placeholder Helper text |
Links
| Inline | |
|---|---|
primary | Visit the documentation to learn more about the color API. |
secondary | Visit the documentation to learn more about the color API. |
tertiary | Visit the documentation to learn more about the color API. |
accent | Visit the documentation to learn more about the color API. |
surface | Visit the documentation to learn more about the color API. |
highlight | Visit the documentation to learn more about the color API. |
neutral | Visit the documentation to learn more about the color API. |
Visit the documentation to learn more about the color API.
Visit the documentation to learn more about the color API.
Visit the documentation to learn more about the color API.
Visit the documentation to learn more about the color API.
Visit the documentation to learn more about the color API.
Visit the documentation to learn more about the color API.
Visit the documentation to learn more about the color API.
Tabs
| Underline | |
|---|---|
primary | Account Orders Settings Notif. |
secondary | Account Orders Settings Notif. |
tertiary | Account Orders Settings Notif. |
accent | Account Orders Settings Notif. |
surface | Account Orders Settings Notif. |
highlight | Account Orders Settings Notif. |
neutral | Account Orders Settings Notif. |