Components
Alerts
Short, inline messages that confirm an action or flag a problem. Each type has its own color and icon.
Standard
Sentence case with a left bar. Use for most in-page messages.
Your discount has been applied.
Your box ships in 2 days — finish choosing.
We couldn't process your card.
Banner
Uppercase eyebrow style for page-level announcements, with or without the bar.
Your discount has been applied.
Your box ships in 2 days — finish choosing.
We couldn't process your card.
Your discount has been applied.
Your box ships in 2 days — finish choosing.
We couldn't process your card.
On dark backgrounds
Your discount has been applied.
Your box ships in 2 days — finish choosing.
We couldn't process your card.
Do
Keep messages to one sentence and say what happens next.Don't
Stack more than one alert of the same type, or use an alert for marketing content.