Toaster

A succinct message that is displayed temporarily.

Props

Hover Close Delay

Features

🕐 Automatically closes
⏯️ Pause closing on hover (single, all, none)

Usage

Unlike most builders, the toast is not component-based. Instead, it provides a global functionality that can be accessed from anywhere in your application. To accomplish this, it is recommended that you create a global component that is called on the root of your application.

The first step is to create a Toaster component that will be used to render toast notifications. We can take advantage of Svelte context module to create the template for the toast notifications and expose the helper function so it can be used in other components.

<script lang="ts" module>
  // Define your toast data.
  type ToastData = {
    title: string;
    description: string;
  };

  const toaster = new Toaster<ToastData>();

  export const addToast = toaster.addToast;
</script>

<script lang="ts">
  import { Toaster } from "melt/builders";
</script>

<div {...toaster.root}>
  {#each toaster.toasts as toast (toast.id)}

    <div {...toast.content}>
      <h3 {...toast.title}>{toast.data.title}</h3>
      <div {...toast.description}>{toast.data.description}</div>
      <button {...toast.close} aria-label="dismiss alert">X</button>
    </div>
  {/each}
</div>

This component should be added to your root +layout.svelte or App.svelte component.

<script>
  import Toaster from '$lib/Toaster.svelte'

  let { children } = $props();
</script>

<Toaster />

{@render children()}

Finally, you can use the exported addToast helper function to add a toast from any component of the application.

<script lang="ts">
  import { addToast } from '$lib/Toaster.svelte'

  function onclick() {
    addToast({
      data: {
        title: 'Success',
        description: 'The resource was created!'
      }
    })
  }
</script>

<button {onclick}>Create</button>

⚠️ By default, some browsers add the inset property to elements with the popover attribute. This includes the toaster.root element. Be sure to set inset: unset if you do not wish for that!

API Reference

Constructor Props

The props that are passed when calling

new Toaster()

export type ToasterProps = {
  /**
   * The delay in milliseconds before the toast closes. Set to 0 to disable.
   * @default 5000
   */
  closeDelay?: MaybeGetter<number | undefined>;

  /**
   * The sensitivity of the toast for accessibility purposes.
   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live
   * @default 'polite'
   */
  type?: MaybeGetter<"assertive" | "polite" | undefined>;

  /**
   * The behaviour when a toast is hovered.
   * @default 'pause'
   */
  hover?: MaybeGetter<"pause" | "pause-all" | null | undefined>;
};

export type ToasterProps = {
  /**
   * The delay in milliseconds before the toast closes. Set to 0 to disable.
   * @default 5000
   */
  closeDelay?: MaybeGetter<number | undefined>;

  /**
   * The sensitivity of the toast for accessibility purposes.
   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live
   * @default 'polite'
   */
  type?: MaybeGetter<"assertive" | "polite" | undefined>;

  /**
   * The behaviour when a toast is hovered.
   * @default 'pause'
   */
  hover?: MaybeGetter<"pause" | "pause-all" | null | undefined>;
};

Methods

The methods returned from

new Toaster()

addToast

(props: AddToastProps<T>) => Toast<T>

Adds a toast.

removeToast
```
(id: string) => void
```
```
(id: string) => void
```
Removes the toast with the specified ID. @param id The id of the toast.
updateToast
```
(id: string, data: T) => void
```
```
(id: string, data: T) => void
```
Updates a toast's data. @param id The id of the toast. @param data The updated data.

Properties

The properties returned from

new Toaster()

ids
```
{ root: string }
```
```
{ root: string }
```
closeDelay
```
number
```
```
number
```

type

"assertive" | "polite"

hover

"pause" | "pause-all"

toasts
```
Toast<T>[]
```
```
Toast<T>[]
```
The active toasts.

root

{
  readonly "data-melt-toaster-root": ""
  readonly id: string
  readonly popover: "manual"
}

Spread attributes for the container of the toasts.