Alert Component — Astro

Accessible alert component with variants and dismissible functionality

Alert Component

An accessible alert component for displaying important messages to users. Supports success, error, warning, and info variants with optional dismissible functionality.

Variants

Alerts come in four semantic variants that use theme-aware colors. Click the buttons below to see them in action:

Live Examples

Auto-Dismiss

Alerts can automatically dismiss after a set duration:

Auto-Dismiss Examples

Usage

astro astro 
---
import Alert from '../../components/Alert.astro';
---

<!-- Basic alert -->
<Alert variant="success">
  Your changes have been saved.
</Alert>

<!-- Dismissible alert -->
<Alert variant="error" dismissible>
  An error occurred. Please try again.
</Alert>

<!-- Auto-dismiss alert -->
<Alert variant="success" dismissible autoDismiss={5000}>
  This alert will automatically dismiss in 5 seconds.
</Alert>

Props

  • variant (string, optional) - Alert variant: "success", "error", "warning", or "info" (default: "info")
  • dismissible (boolean, optional) - Whether the alert can be dismissed (default: false)
  • autoDismiss (number, optional) - Auto-dismiss duration in milliseconds. Set to 0 to disable (default: 0). Common values: 3000 (3s), 5000 (5s), 7000 (7s)
  • id (string, optional) - Unique ID for the alert. If not provided, a random ID will be generated
  • class (string, optional) - Additional CSS classes

Features

  • Four semantic variants (success, error, warning, info)
  • Theme-aware colors using semantic variables
  • Dismissible functionality with smooth animations
  • Auto-dismiss functionality - Automatically dismiss after a set duration
  • Full keyboard accessibility (Enter/Space to dismiss)
  • ARIA attributes for screen readers (role="alert", aria-live="polite")
  • Screen reader announcements when dismissed
  • Respects prefers-reduced-motion
  • Focus management for close button

Toast Notifications

For toast notifications (fixed position alerts), see the Toast Component documentation.

Accessibility

The Alert component includes comprehensive accessibility features:

  • ARIA Roles: Uses role="alert" for important messages
  • Live Regions: aria-live="polite" for screen reader announcements
  • Labels: Each variant has an appropriate aria-label
  • Keyboard Support: Close button responds to Enter/Space keys
  • Focus Management: Close button has visible focus indicators
  • Screen Reader Feedback: Announces when alerts are dismissed

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above; add minimal JS for dismiss.