Toast Component — Astro

Toast Notifications

Toast notifications are fixed-position alerts that appear in a corner or center of the screen. They're perfect for non-intrusive notifications, success messages, and temporary feedback.

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.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Toast

bash bash Copy code

pnpm dlx rizzo-css add Toast

bash bash Copy code

npx rizzo-css add Toast

bash bash Copy code

bunx rizzo-css add Toast

Programmatic Toast Creation

The easiest way to show toasts is using the showToast() function:

Toast Positions

Toasts can be positioned in six different locations:

Auto-Dismiss

Toasts automatically dismiss after 5 seconds by default. You can customize the duration:

Multiple Toasts

Multiple toasts stack vertically in the same position:

Usage

Toast uses the Alert component; include Toast (or Alert) once so showToast is available. Scripts run after DOM ready.

---
import '../components/astro/Toast.astro';
---

<!-- Toast container is rendered by the component. Then anywhere: -->
<button class="btn btn-primary" onclick="window.showToast('Saved!', { variant: 'success' })">Show Toast</button>

<!-- Include toast container + script from package scaffold. Then: -->
<button class="btn btn-primary" onclick="window.showToast('Saved!', { variant: 'success' })">Show Toast</button>
<!-- window.showToast(msg, { variant, position, autoDismiss }); window.removeAllToasts(); -->

<script>
  import { Toast } from '$lib/rizzo';
  import { showToast } from '$lib/rizzo/utils/toast';
</script>

<Toast />
<button class="btn btn-primary" on:click={() => showToast('Saved!', { variant: 'success' })}>Show Toast</button>

<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>

Programmatic API:

// After including Toast/Alert component (or vanilla script)
window.showToast('Success!', { variant: 'success' });
window.showToast('Error', { variant: 'error', position: 'top-right', autoDismiss: 5000 });
window.removeToast('toast-id');
window.removeAllToasts();

Toast Options

• variant (string, optional) - Toast variant: "success", "error", "warning", or "info" (default: "info")
• dismissible (boolean, optional) - Whether the toast can be manually dismissed (default: true)
• autoDismiss (number, optional) - Auto-dismiss duration in milliseconds. Set to 0 to disable (default: 5000)
• position (string, optional) - Toast position: "top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center" (default: "top-right")
• id (string, optional) - Unique ID for the toast. If not provided, a random ID will be generated

Features

• Fixed positioning in six locations (top/bottom + left/center/right)
• Automatic stacking of multiple toasts
• Auto-dismiss with customizable duration (default: 5 seconds)
• Smooth slide-in animations (respects prefers-reduced-motion)
• All alert variants supported (success, error, warning, info)
• Programmatic control via showToast(), removeToast(), removeAllToasts()
• Mobile responsive (full width on mobile)
• Accessible with ARIA attributes
• Theme-aware styling

Toast Component (Static)

For static toast components in Astro templates, you can use the Toast component:

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

<Toast variant="success" position="top-right" autoDismiss={5000}>
  Your changes have been saved!
</Toast>

Note: For dynamic toast notifications, use the programmatic showToast() function instead. The toast functions are available globally on all pages via window.showToast(), window.removeToast(), and window.removeAllToasts().

Other frameworks: Vanilla · Svelte · Vue · React