Displays a contextual status message. Use for important feedback that requires user attention.
Preview
Heads up!
This is an informational message with detail.
Code
VUE
<Alert />Props
Alert headline
Alert body text
Semantic color variant
Shows a close button to dismiss the alert
Displays a contextual icon
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | "Heads up!" | — | Alert headline |
message | string | "This is an informational message with detail." | — | Alert body text |
variant | select"info" | "success" | "warning" | "error" | "info" | — | Semantic color variant |
dismissible | boolean | false | — | Shows a close button to dismiss the alert |
showIcon | boolean | true | — | Displays a contextual icon |
Usage
Use "info" for neutral updates, "success" for completed actions, "warning" for things needing attention, and "error" for failures. Place alerts near the content they relate to — not always at the top of the page.
Accessibility
Uses role="alert" so screen readers announce the content immediately on render.
For non-urgent messages, role="status" is more appropriate.
The dismiss button includes an aria-label for screen readers.