Install
Examples
Info
Info headingInformation message text.
Warning
Warning headingWarning message text.
Negative
Error headingError message text.
Positive
Success headingSuccess message text.
Without heading
Set show-heading="false" for a single-line message with no title.
Message without a heading.
Without actions
Set show-actions="false" to drop the action buttons entirely.
WarningMessage with no action buttons.
Single action
Slot one action and set show-action-2="false" to keep a single button.
ErrorError with one action.Dismiss
Custom actions
Slot one or two actions with your own labels.
Update availableA new version is ready to install.InstallLater
Guidelines
Usage
persistent inline alerts inside a panel or
card. For a full-width page-level bar use Banner; for
transient feedback use Toast.
Do
- Match the status to the message — positive for success, negative for errors.
- Keep the heading short and the body to a sentence or two.
- Place the alert inline, beside the content it refers to.
Don’t
- Don’t use an alert for page-level announcements — use Banner.
- Don’t use it for transient confirmations — use Toast.
- Don’t stack many alerts at once; surface the most important message.
Accessibility
- Role: the container is
role="alert", so assistive tech announces it as soon as it appears.
- Not colour alone: each status pairs its accent colour with a distinct status icon, so meaning never relies on colour.
- Actions: rendered as native
<button>s — focusable and activated with Enter / Space.
- Focus: action buttons show the global keyboard focus ring.
Properties
Related
- Banner — a full-width, page-level announcement bar.
- Toast — transient feedback that auto-dismisses.
- Status icon — the status glyph used inside the alert.