✍️ Alert-banner
Updated 2026-05-14
Content guidelines
Section titled “Content guidelines”Alerts communicate important information that requires the user’s attention. They can be informational, confirmatory, cautionary, or indicate an error. Unlike toasts, alerts are persistent and remain visible until dismissed or resolved.
When to use
Section titled “When to use”- To warn the user of a condition that may affect their work or data - before an action is taken.
- To confirm that a significant action was completed and the user should be aware of the result.
- To surface a system-level error that requires action to resolve.
- Do not use alerts for routine confirmations - use toast notifications instead.
- Do not stack multiple alerts. Consolidate if possible.
- Keep alert text to one to two sentences.
- Lead with the most important information.
- Use the appropriate severity: informational, success, warning, or error.
- Include a clear action link or button when the user needs to do something.
- Do not use
Alert:orWarning:as a prefix in the message body - the icon and color convey severity.
Behavior
Section titled “Behavior”- Informational and success alerts can be dismissible.
- Warning and error alerts should persist until the underlying issue is resolved or the user explicitly dismisses them.
- Alerts should appear at the top of the affected area, not in the center of the page.
Do / Don’t
Section titled “Do / Don’t”Inline banner
Section titled “Inline banner”An inline banner displays a persistent warning, error, or informational message within a page or form. Unlike a global alert, it is scoped to the immediate context.
When to use
Section titled “When to use”- To display persistent warnings, errors, or informational messages within a page or form.
- State the issue and what the user should do. Keep to one to two sentences.
- Include a link or action if applicable.
Notification
Section titled “Notification”Notifications inform users of updates, background task completions, or events that require their attention. They appear in the notification panel or dropdown.
When to use
Section titled “When to use”- To inform users of updates, background task completions, or events that require their attention.
- Use direct, concise language. One to two sentences.
- Include a timestamp.
- Include a link or action if the user must do something in response.
- Do not use generic text like
You have a new notification.
Notification toast
Section titled “Notification toast”Toasts confirm that a background action completed, or surface non-critical errors and warnings that do not block the user.
When to use
Section titled “When to use”- To confirm that a background action completed.
- To surface non-critical errors or warnings that do not block the user.
- Do not use toasts for actions that require user input.
- For routine confirmations that need persistence, use an alert / banner instead.
- Keep to one short sentence.
- Include an undo action where relevant.
Examples
Section titled “Examples”| Scenario | Toast text |
|---|---|
| Dataset deleted | Dataset deleted. Undo |
| Export complete | Export ready. Download |
| Connection failed | Connection failed. Try again |
Tooltip
Section titled “Tooltip”Tooltips provide short contextual help on hover or focus. They are best for icon-only controls that need a label, or for brief supplementary information that does not need to be persistently visible.
When to use
Section titled “When to use”- To provide short contextual help on hover or focus.
- For icon-only controls that require a label.
- Do not use tooltips for critical information — users should not be required to hover to understand the UI.
- Limit to a few words or one concise sentence.
- Do not repeat the label of the element being described.
- For multi-sentence explanations, use a popover or inline help text instead.