title | description | hide_title |
---|---|---|
Alert |
Alerts display important messages in a way that attracts the user's attention without interrupting their task. |
true |
Alert Storybook
Alerts display important messages in a way that attracts the user's attention without interrupting their task.
Type | Purpose |
---|---|
Persistent | They are usually urgent and intrusive, require immediate attention and require action to be dismissed. |
Passive | Are informational, report a system issue that does not require any action by users. |
Within Grafana, we have three different types of alerts and they can be used depending on the context and content.
Type | Purpose | Behavior |
---|---|---|
Inline | To notify users of the status of an action. They appear at the top or bottom of the main content area |
Passive or Persistent |
Toast | These temporary window elements are used to display short messages; they appear at the top-right corner of the screen and can be dismissed by clicking the [x] or it will disappear after a few seconds |
Passive |
Banner | It will remain until the user rejects it or until the status that triggered the banner is resolved |
Persistent |
Status | Usage | Action | Color | Icon |
---|---|---|---|---|
Informational | Provide information to users, and don’t interrupt any current actions |
Do not require immediate action and can be dismissed by a user clicking the [X] or passively display until the display timer expires |
Blue background |
Info-circle |
Success | When any action is successful, it is confirmed when a task is completed as expected |
Typically do not require further action and can be dismissed automatically or persist in a nonintrusive manner |
Green background |
Check |
Warning | Informing users that an action is undesirable |
Often persists until users have taken action to dismiss the notification or taken steps to resolve the issue |
Yellow background |
Exclamation-triangle |
Error | When an action doesn't happen as expected, usually something has failed and the user is expected to take action |
Always persists until the user has taken steps to remedy the issue that triggered the notification |
Red background |
Exclamation-circle |
An Alert can contain a single action, dismiss or close actions are optional.
-
Icon Status
- Represent the importance of the message through the color and icon for each status.
-
Alert Copy/Title
- Should be explicit, clear and short that explain the most important part of the information.
-
Details
- Precise description for the notification, telling users what they need to do.
-
Button and text links
- Only persistent notifications should contain text links or buttons.
-
Close Icon
- Appears when the notification can be dismissed by the user.
- Icon Status: Informs user what is the notification status
- Alert Copy/Title: Notifying with a quick summary of what the message is about
- Details: Short description explaining in more detail what the user has to do
- Action (optional): Text link button or default button which allows users to navigate to a page with more details