Alerts & messages
Components and patterns for displaying alerts, notifications, badges, and other messaging elements. Think about which type of message you want to convey. It should help you determine which notification type you should choose. Also, be considerate. Too frequent and disruptive notifications can cause a bad user experience.
Which type should I use?
Use this decision tree to choose the right component for your messaging needs:
For Important Information & Status Updates
| Component | When to use | User action required | Priority |
|---|---|---|---|
| Alert | Show important information, warnings, errors, or success messages | Optional | High |
| Badge | Display counts, status indicators, or dynamic labels | None | Low-Medium |
| Tag | Label content, categorize items, or add metadata | None | Low |
For Empty States & Onboarding
| Component | When to use | User action required | Priority |
|---|---|---|---|
| Empty state | Welcome new users, guide next steps when no content exists | Yes | High |
For Premium Features & Upselling
| Component | When to use | User action required | Priority |
|---|---|---|---|
| Premium features | Indicate paid features, upsell opportunities | Optional | Medium |
Best Practices
Message Hierarchy
- Critical errors → Use Alert (danger variant)
- Important information → Use Alert (info/warning variants)
- Status updates → Use Badge or Tag
- Empty states → Use Empty State pattern
- Premium features → Use Premium Features pattern
Accessibility
- Always provide clear, descriptive text
- Use appropriate color contrast
- Include icons for visual clarity
- Ensure keyboard navigation works properly
