Feedback

Toast

Notification toasts powered by svelte-sonner. Supports 5 variants, 7 colors, icons, avatars, action buttons, and promise-based loading. Call toast() from anywhere.

Setup

Add Toaster to your root layout once. Then call toast() from any component.

Toaster is already added to this site's layout.

<!-- Add Toaster to your root +layout.svelte -->
<script lang="ts">
  import { Toaster } from 'sv5ui';
</script>

<Toaster />

Basic Usage

<script lang="ts">
  import { toast } from 'sv5ui';
  import { Button } from 'sv5ui';
</script>

<Button label="Show Toast" onclick={() => toast('Hello! This is a toast message.')} />

Toast Types

Semantic methods with automatic icons.

<Button label="Success" color="success" onclick={() => toast.success('Changes saved successfully!')} />
<Button label="Error" color="error" onclick={() => toast.error('Something went wrong.')} />
<Button label="Warning" color="warning" onclick={() => toast.warning('Your session expires in 5 minutes.')} />
<Button label="Info" color="info" onclick={() => toast.info('A new version is available.')} />

With Description

Add secondary text below the title.

<Button label="With Description" onclick={() => toast.success('File uploaded', {
  description: 'Your document has been uploaded and is ready to share.'
})} />

Custom Icon

Override the default icon with any Iconify icon name.

<Button label="Custom Icon" onclick={() => toast('Rocket launched!', {
  icon: 'lucide:rocket'
})} />

<Button label="Star Icon" onclick={() => toast('Added to favorites', {
  icon: 'lucide:star',
  color: 'warning'
})} />

With Avatar

Display a user avatar alongside the toast.

<Button label="With Avatar" onclick={() => toast('John commented on your post', {
  avatar: { src: 'https://i.pravatar.cc/40?u=john', alt: 'John' },
  description: 'Great work on the new feature!'
})} />

Colors

Override the semantic color with color.

<Button label="Primary" onclick={() => toast('Primary color toast', { color: 'primary' })} />
<Button label="Tertiary" onclick={() => toast('Tertiary color toast', { color: 'tertiary' })} />
<Button label="Secondary" onclick={() => toast('Secondary color toast', { color: 'secondary' })} />

With Action

Add an action button to the toast.

<Button label="With Action" onclick={() => toast('Message deleted', {
  action: {
    label: 'Undo',
    onClick: () => toast.success('Message restored')
  }
})} />

Promise

Auto-update toast based on promise state.

<script lang="ts">
  import { toast } from 'sv5ui';

  function saveData() {
    const promise = new Promise((resolve) => setTimeout(resolve, 2000));

    toast.promise(promise, {
      loading: 'Saving changes...',
      success: 'Changes saved!',
      error: 'Failed to save'
    });
  }
</script>

<Button label="Save (Promise)" onclick={saveData} />

Dismiss

Dismiss by ID or dismiss all.

<script lang="ts">
  import { toast } from 'sv5ui';

  let toastId: string | number;
</script>

<Button label="Show Persistent" onclick={() => {
  toastId = toast('This stays until dismissed', { duration: Infinity });
}} />
<Button label="Dismiss" variant="outline" onclick={() => toast.dismiss(toastId)} />
<Button label="Dismiss All" variant="ghost" onclick={() => toast.dismiss()} />

Variants & Position

These are set on the Toaster component in your layout — they apply globally to all toasts.

5 variants: outline (default), soft, subtle, solid, accent

<!-- Set variant on the Toaster component -->
<Toaster variant="outline" />  <!-- default -->
<Toaster variant="soft" />
<Toaster variant="subtle" />
<Toaster variant="solid" />
<Toaster variant="accent" />

6 positions: top-right, top-center, top-left, bottom-right (default), bottom-center, bottom-left

<!-- Set position on the Toaster -->
<Toaster position="top-right" />
<Toaster position="top-center" />
<Toaster position="top-left" />
<Toaster position="bottom-right" />  <!-- default -->
<Toaster position="bottom-center" />
<Toaster position="bottom-left" />

Methods

Import toast from sv5ui and call from anywhere.

Method	Description
`toast(message, options?)`	`Show a generic toast`
`toast.success(message, options?)`	`Success toast with check icon`
`toast.error(message, options?)`	`Error toast with X icon`
`toast.warning(message, options?)`	`Warning toast with alert icon`
`toast.info(message, options?)`	`Info toast with info icon`
`toast.loading(message, options?)`	`Loading toast with spinner`
`toast.promise(promise, config)`	`Auto-updates based on promise state`
`toast.dismiss(id?)`	`Dismiss by ID, or all if no ID`

Toast Options

Second argument to toast().

Option	Type	Default	Description
`description`	`string`	`-`	`Secondary text below title`
`icon`	`string`	`-`	`Iconify icon name`
`avatar`	`AvatarProps`	`-`	`Avatar with src, alt, text, icon`
`color`	`ToastColor`	`-`	`Override semantic color`
`duration`	`number`	`5000`	`Custom duration (ms)`
`action`	`ActionConfig`	`-`	`Action button config`
`cancel`	`CancelConfig`	`-`	`Cancel button config`
`id`	`string \| number`	`-`	`Custom toast ID`
`onDismiss`	`() => void`	`-`	`Callback when dismissed`
`onAutoClose`	`() => void`	`-`	`Callback when auto-closed`

Toaster Props

Props for the Toaster component in your layout.

Prop	Type	Default	Description
`variant`	`'outline'\|'soft'\|'subtle'\|'solid'\|'accent'`	`'outline'`	`Visual style for all toasts`
`position`	`string`	`'bottom-right'`	`Toast position on screen`
`visibleToasts`	`number`	`3`	`Max visible toasts`
`duration`	`number`	`5000`	`Auto-dismiss duration (ms)`
`closeButton`	`boolean`	`true`	`Show close button`
`expand`	`boolean`	`false`	`Expand on hover`
`gap`	`number`	`14`	`Gap between toasts (px)`
`class`	`string`	`-`	`Additional CSS classes`

Progress Breadcrumb