Alert
Accessible alert component with variants, dismissible functionality, and auto-dismiss
Same BEM classes and behavior as Astro, Svelte, and React.
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.
pnpm dlx rizzo-css add Alert
Live examples
Vue
Your changes have been saved.
An error occurred. Please try again.
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
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>
<!-- 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">
<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>
<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>
Other frameworks: Astro · Vanilla · Svelte · React
npm 
pnpm 
yarn 
bun