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.

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

Import the toast utility and use it programmatically:

// Import toast utility
import { showToast, removeToast, removeAllToasts } from '../utils/toast';

// Show a simple toast
showToast('Success! Your changes have been saved.', {
  variant: 'success'
});

// Show toast with custom options
showToast('Error occurred', {
  variant: 'error',
  position: 'top-right',
  autoDismiss: 5000,
  dismissible: true
});

// Remove a specific toast by ID
const toastId = showToast('This will be removed', { variant: 'info' });
setTimeout(() => removeToast(toastId), 2000);

// Remove all toasts
removeAllToasts();

Or use the global functions (available after importing the utility):

// Global functions (available on window)
window.showToast('Success!', { variant: 'success' });
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/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().

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM for static toasts; use showToast() / removeToast() for dynamic (included in scaffold).