Toast

A notification that stacks, auto-dismisses, and can carry an action.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add toast

Usage

Import and fire toasts from your component:

import { toast } from '$lib/sivir/components/toast';

toast.success('Profile updated', {
  description: 'Your changes have been saved.'
});
toast.error('Request failed', {
  description: 'Could not connect.'
});

Examples

Toast variants for different notification types.

All types

Anatomy

Toast - Renders a notification.

Toaster - Renders the notification region.