Toast — Svelte

Toast component

Fixed-position notifications (success, error, warning, info). Use the Toast component for a single static toast, or the programmatic API (showToast, removeToast, removeAllToasts) for dynamic toasts. Same BEM and behavior as the Astro/docs site.

Features

• Six positions: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
• Variants: success, error, warning, info (same as Alert)
• Auto-dismiss with configurable duration (default 5s); set to 0 to disable
• Dismissible with close button (default: true)
• Multiple toasts stack vertically in the same position
• Smooth slide-in/out (respects prefers-reduced-motion)
• ARIA (role="alert", aria-live="polite")
• Theme-aware; full width on mobile

Programmatic API

Import the toast utility and call it from Svelte (e.g. in an event handler or after a mutation):

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

// Show a toast (returns toast id)
const id = showToast('Saved!', { variant: 'success' });

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

// Remove by id
removeToast(id);

// Remove all toasts
removeAllToasts();

On the docs site, window.showToast, window.removeToast, and window.removeAllToasts are also available (injected by the layout).

Live examples (programmatic)

Positions

Static Toast component

For a single toast rendered in the template (e.g. a fixed “Saved” message in a form section), use the Toast component. It wraps Alert with toast positioning. Use it when the toast is part of your layout; for one-off messages use the programmatic API above.

Toast options

• variant — success, error, warning, info (default: info)
• dismissible — Show close button (default: true)
• autoDismiss — Duration in ms; 0 to disable (default: 5000)
• position — top-right, top-left, top-center, bottom-right, bottom-left, bottom-center (default: top-right)
• id — Optional id for the toast (for removeToast(id))

Key BEM classes

• Static wrapper: toast, toast--top-right (etc.); data-toast-container. Contains an Alert.
• Programmatic container: toast-container, toast-container--top-right (etc.). Created by showToast(); holds elements with class alert alert--{variant} (same as Alert component).

Usage (Svelte)

<script>
  import Toast from './components/svelte/Toast.svelte';
  import { showToast, removeToast, removeAllToasts } from './utils/toast';

  function onSave() {
    saveData();
    showToast('Saved!', { variant: 'success' });
  }
</script>

<!-- Static toast -->
<Toast variant="success" dismissible autoDismiss={5000} position="top-right">
  Changes saved.
</Toast>

<!-- Or programmatic only -->
<button onclick={onSave}>Save</button>

Full Astro Toast documentation — options and programmatic API.

← Back to Svelte components