Introduction to Alerts
Alerts are crucial UI components for conveying timely information, status updates, or notifications to users. They should be used judiciously to avoid overwhelming the user. This section outlines the types of alerts available and best practices for their implementation within our design system.
Types of Alerts
We support several standard alert types, each visually distinct to communicate its semantic meaning effectively. These are designed to be immediately recognizable and understandable.
Success Alerts
Used to confirm that an action has been completed successfully.
Information Alerts
Provide users with useful, context-specific information.
Warning Alerts
Indicate that something might require attention or could potentially lead to a problem.
Danger Alerts
Signal that a serious problem has occurred or that an action might have severe negative consequences.
Best Practices
- Clarity is Key: Messages should be concise, clear, and actionable. Avoid jargon.
- Contextual Relevance: Place alerts near the element or action they relate to.
- Appropriate Severity: Choose the alert type that accurately reflects the situation.
- Avoid Overuse: Too many alerts can lead to notification fatigue and reduce their impact.
- Accessibility: Ensure alerts are perceivable by users with disabilities (e.g., sufficient color contrast, screen reader compatibility).
Implementation Notes
Alerts can be implemented using simple HTML structure and inline CSS. For example, a warning alert might look like this:
<div class="alert-example alert-warning">
This is a warning message.
</div>Explore different aspects of our system. Perhaps you're interested in the typography styles or have a query about button variations?