Toast
Fixed position toast notifications with auto-dismiss and programmatic control
Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
The command below includes <strong>Toast</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 Toast
Live examples
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 Toast from '../components/astro/Toast.astro';
---
<Toast variant="info" position="top-right" dismissible client:load>Saved!</Toast>
<!-- Include toast container + script from package scaffold. -->
<div id="toast-container" class="toast-container"></div>
<button data-toast="Message">Show toast</button>
<script>
import { Toast } from '$lib/rizzo';
</script>
<Toast variant="info" position="top-right" dismissible>Saved!</Toast>
<script setup>
import Toast from '@/components/rizzo/Toast.vue';
</script>
<template>
<Toast variant="info" position="top-right" dismissible>Saved!</Toast>
</template>
import { Toast } from './components/react';
<Toast variant="info" position="top-right" dismissible>Saved!</Toast>
Other frameworks: Astro · Vanilla · Svelte · Vue