Alert
Overview
Usage
Examples
API
An alert is a persistent, inline banner that conveys a severity-coded message in place. <rhombus-alert> — distinct from the transient toast — reuses the shared --toast-<variant>-* contract tokens, so toggling the theme above re-skins it without touching markup.
Example
Information:
Sync in progress
When to use
- Use an alert for a message that should stay visible in context — a validation summary, a status banner, a warning tied to the surrounding content.
- When severity matters and the message should remain readable as the user works the surrounding page, rather than appearing briefly and vanishing.
When not to use
- For a brief, auto-dismissing confirmation that doesn't need to stay on screen, use a Toast.
- For a decision the user must resolve before continuing, use a Dialog (or a Confirm Dialog for a yes/no).
- For a screen with no data to show rather than a status message, use an Empty State.
Related components
- Toast — transient, auto-dismissing notifications.
- Badge — compact inline status labels.
- Empty State — placeholder for absent content.
- Dialog — blocking modal surfaces.
Was this page helpful?