Anatomy
The Alert consists of four primary elements that work together to communicate important information to users.
- Status icon
- Title
- Close action (Optional)
- Body content (presented as text and actions) (Optional)
Options
The Alert supports four status types and flexible content configurations to accommodate various messaging scenarios.Status
| Status type | Description |
|---|---|
| Info | Used for neutral types of notification to users. |
| Success | Used for positive-type confirmations to users. |
| Warning | Used to convey important information that may require user action soon. |
| Danger | Used to convey critical errors that require user action. |
Content Area
The Alert allows for any type of content inside below the title and icon. This is typically represented as text and 0–2 actions (as Secondary Buttons).
Close
Preserve the close action by default. Remove it only when an alert must persist, such as in warning or danger scenarios.
Behavior
The Alert responds to content overflow by expanding vertically to accommodate longer messages while maintaining its visual structure.Overflow handling
Usage Guidelines
When to Use
Use alerts to keep users informed of important information, such as updates, status, and errors. Alerts work across multiple layouts and scopes of notification.When not to use
Alerts should not be used for system-wide notifications. Avoid overusing Alerts. Overuse can lead to an overwhelming interface.Alternatives
Alert vs Announcement
Announcements are used to convey app-wide information. They are placed as a global element on the page. Alerts are contextual to an area of an app, and are more flexible in scope and layout position.Alert vs Dialog
Dialogs are interruptive by design, while an Alert is non-disruptive. Prefer using an Alert when information needs to be conveyed. Use a Dialog only when there is a clear need to interrupt a flow, such as a confirmation of destructive or irreversible actions.Alert vs Toast
Alerts are used to communicate information about either part of a page or a whole page. Alerts can be used to summarize information, such as a summary of errors. Toasts are brief pieces of information and usually appear as the result of user action.How to Use
As part of a form
Pair alerts with forms, typically as part of an error pattern.Layout positions
Position alerts toward the top of their related context. This includes UIs such as Pages, Drawers, and Dialogs.
Content
Content within the Alert should communicate clearly and concisely, helping users understand the situation and take appropriate action.Use a title that identifies the issue
Titles identify the issue clearly. Write titles in sentence case.
Do
Don’t
Focus on a single message
The body content should focus on a single, simple message or action to avoid overwhelming the user with too much information. Avoid repeating the information in the title. Do not use periods in short phrases or single sentences. An exception to this rule is for a summary of errors, typically found with forms.
Do
Write concise, action-oriented body content
Do
Don’t
Keyboard Interaction
Users can navigate the Alert using standard keyboard controls.| Key | Description |
|---|---|
| Tab | Move to the next tab-able element within the Alert or the page. |