- Guidelines
- React API Reference
- Blazor API Reference
Alerts are non-disruptive messages that provide important information, feedback, or context without interrupting the user’s workflow. They communicate status, warnings, or other key information that may require attention.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use alerts to communicate important information, status updates, warnings, or success messages without interrupting workflow. |
| Content | Keep messages concise and actionable. Include just enough detail for users to understand the context and any required actions. |
| Behavior | Display alerts in context, near relevant content. Allow dismissal when appropriate. Avoid auto-dismissal for critical information. |
| States | Use appropriate variants (default, destructive) to convey the nature of the message. Include icons to reinforce meaning. |
| Feedback | Provide clear visual cues about the alert’s importance through color, icons, and styling. Allow users to dismiss alerts when appropriate. |
| Examples | Success confirmations, non-critical warnings, informational updates, or contextual guidance. |
Best Practices
- Contextual Placement: Position alerts close to the relevant content or action that triggered them.
- Clear Messaging: Use direct, actionable language that clearly communicates the information or required action.
- Appropriate Variants: Choose alert variants based on the message’s importance and context (default for information, destructive for errors).
- Visual Reinforcement: Include appropriate icons to enhance the message’s meaning and improve scanability.
- Dismissible When Appropriate: Allow users to dismiss non-critical alerts while ensuring important information remains visible.
Do’s and Don’ts
Do
- Use alerts for important but non-disruptive information.
- Keep messages concise and actionable.
- Include icons to reinforce meaning.
- Position alerts contextually near relevant content.
Don't
- Use alerts for critical actions requiring confirmation (use Alert Dialog instead).
- Create alert fatigue with too many messages.
- Auto-dismiss important information.
- Use ambiguous or vague messaging.
Additional Guidance
- Psychological Impact:
- Attention Management: Alerts draw attention without full workflow interruption.
- Cognitive Load: Multiple simultaneous alerts can overwhelm users—prioritize and consolidate when possible.
- Confidence: Well-timed, clear alerts provide reassurance that the system is working as expected.