Alerts inform people about important changes or persistent conditions in a prominent way. They’re placed at the top of the page or section they apply to, below its header.
Figma
The Figma reference for Alert will appear here once the design link is added.
Storybook
Interactive examples for Alert will render here once the Storybook link is wired in.
Best practices
- Use thoughtfully and sparingly, for only the most important information.
- Don’t use an alert to point at what to do in the UI — make that action clear in the UI itself.
- Make alerts dismissible unless they contain critical information or a required step.
- Use the default icon and color for success, info, warning, and critical tones.
- Focus each alert on a single theme, with at most one primary action.
Do’s and don’ts
Do
Keep an alert concise and scannable, on one clear topic.
Don’t
Use an alert for marketing or upsell content — use a callout card instead.