Feedback · astro-ui · Alert
Alert
Feedback message with 8 variants and accessible dismissal.
Alert shows a persistent inline message with a variant-colored surface, built-in variant glyph, and an optional dismiss button. Smart semantics: destructive alerts render role=alert (announced immediately); the others render role=status (polite).
Features
- 8 variants: primary, destructive, success, warning, info, carbon, secondary, accent
- 5 sizes: xs → xl
- Smart role: alert (destructive) vs status (others)
- closable renders an accessible dismiss button
- Icon slot with built-in per-variant glyph
Usage
---
import { Alert } from "astro-ui";
---
<Alert variant="info" title="Heads up">Scheduled maintenance Sunday.</Alert>
<Alert variant="destructive" title="Payment failed" closable>Retry or update your card.</Alert>Demos
Basic
Heads up
Scheduled maintenance Sunday 02:00–04:00 UTC.
Saved
Your changes are live.
<Alert variant="info">
<Fragment slot="title">Heads up</Fragment>
Scheduled maintenance Sunday 02:00–04:00 UTC.
</Alert>
<Alert variant="success">
<Fragment slot="title">Saved</Fragment>
Your changes are live.
</Alert>Variants
Saved
Your changes are live.
Failed
Announced immediately via role="alert".
Heads up
This action cannot be undone.
Info
Secondary information.
<Alert variant="info">…</Alert>
<Alert variant="success">…</Alert>
<Alert variant="warning">…</Alert>
<Alert variant="destructive">…</Alert>Dismissible
Dismiss me
Click the × to close (wire the click app-side).
<Alert variant="warning" closable>
<Fragment slot="title">Storage almost full</Fragment>
Upgrade your plan.
</Alert>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "destructive" | "success" | "warning" | "info" | … | "primary" | Visual + semantic variant. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Surface scale. |
closable | boolean | false | Renders the dismiss button. |
closeLabel | string | "Dismiss" | Accessible name for the dismiss button. |
role | "alert" | "status" | "none" | — | Overrides the variant-driven live-region role. |
class | string | — | Merged via cn(); Tailwind classes welcome. |
id | string | — | Element id. |
Slots
| Slot | Description |
|---|---|
default | Message body text. |
title | Bold heading line. |
icon | Custom leading glyph (overrides the built-in one). |
Accessibility
Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.
- Icons and the close button are aria-hidden — decoration never reaches the a11y tree
- role=alert (destructive, assertive) vs role=status (others, polite)
- Dismiss button carries an aria-label
FAQ
When is it announced?
Destructive alerts use role=alert (assertive, immediate); all other variants use role=status (polite). Mount-time announcements only — toggling content re-announces.
Changelog
Version history mentioning Alert.
v0.1.0 — 2026-11-11
added
- Feedback (6): Alert, Spinner, Skeleton, Toast, Banner, NotificationCenter.