Alert Component — Astro

Alert Component

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

Add this component

The command below includes <strong>Alert</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Alert

bash bash Copy code

pnpm dlx rizzo-css add Alert

bash bash Copy code

npx rizzo-css add Alert

bash bash Copy code

bunx rizzo-css add Alert

Variants

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

Auto-Dismiss

Alerts can automatically dismiss after a set duration:

Usage

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

<Alert variant="success">Your changes have been saved.</Alert>
<Alert variant="error" dismissible>An error occurred. Please try again.</Alert>
<Alert variant="success" dismissible autoDismiss={5000}>This alert will automatically dismiss in 5 seconds.</Alert>

<!-- Ensure Rizzo CSS is loaded. Dismiss/auto-dismiss need minimal JS (see vanilla docs). -->
<div class="alert alert--success" role="alert" aria-live="polite">
  <div class="alert__content">Your changes have been saved.</div>
</div>
<div class="alert alert--error alert--dismissible" role="alert" aria-live="polite">
  <div class="alert__content">An error occurred. Please try again.</div>
  <button type="button" class="alert__close" aria-label="Dismiss">×</button>
</div>

<script>
  import { Alert } from '$lib/rizzo';
</script>

<Alert variant="success">Your changes have been saved.</Alert>
<Alert variant="error" dismissible>An error occurred. Please try again.</Alert>
<Alert variant="success" dismissible autoDismiss={5000}>This alert will automatically dismiss in 5 seconds.</Alert>

<script setup>
import Alert from '@/components/rizzo/Alert.vue';
</script>

<template>
  <Alert class="alert--success"><span class="alert__content">Your changes have been saved.</span></Alert>
  <Alert class="alert--error alert--dismissible">
    <span class="alert__content">An error occurred. Please try again.</span>
    <button type="button" class="alert__close" aria-label="Dismiss">×</button>
  </Alert>
</template>

import { Alert } from './components/react';

<Alert variant="success">Your changes have been saved.</Alert>
<Alert variant="error" dismissible>An error occurred. Please try again.</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

Other frameworks: Vanilla · Svelte · Vue · React