Toast

The first example showcases the complete setup process for a reusable toast component, while the following are abridged to handle everything in a single file. Please keep this in mind when following these examples.

Import createToaster() and export a new shared reference.

import { createToaster } from '@skeletonlabs/skeleton-svelte';

export const toaster = createToaster();

Import the <Toaster> component and toaster reference in your root layout.

<script lang="ts">
  import { Toaster } from '@skeletonlabs/skeleton-svelte';
  import { toaster } from './toaster-svelte';
</script>

<Toaster {toaster}></Toaster>

Import toaster reference and use it to trigger toasts anywhere in your client-side app.

<script lang="ts">
  import { toaster } from './toaster-svelte';
</script>

<button
  class="btn preset-filled"
  onclick={() => {
    toaster.info({
      title: 'This is a toast!'
    });
  }}
>
  Toast
</button>

Trigger Methods

Use the generic create() method to trigger toasts of type: info|success|warning|error.

toaster.create({
  type: 'info',
  message: 'This is a toast',
  description: 'This is a toast description.'
});

Additonally, four shorthand methods are available for specific toast types.

info()
success()
warning()
error()

<script lang="ts">
  import { Toaster, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster();
</script>

<Toaster {toaster}></Toaster>

<div class="w-full max-w-72 grid grid-cols-2 gap-2">
  <button
    class="btn preset-filled"
    onclick={() => {
      toaster.info({
        title: 'This is a toast!'
      });
    }}>Info</button
  >
  <button
    class="btn preset-filled-success-500"
    onclick={() => {
      toaster.success({
        title: 'This is a toast!'
      });
    }}>Success</button
  >
  <button
    class="btn preset-filled-warning-500"
    onclick={() => {
      toaster.warning({
        title: 'This is a toast!'
      });
    }}>Warning</button
  >
  <button
    class="btn preset-filled-error-500"
    onclick={() => {
      toaster.error({
        title: 'This is a toast!'
      });
    }}>Error</button
  >
</div>

Placement

Provide a placement option for createToaster(). Accepts the following:

top-start
top-end
bottom-start
bottom-end

<script lang="ts">
  import { Toaster, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster({
    placement: 'bottom-end'
  });
</script>

<Toaster {toaster}></Toaster>

<button
  class="btn preset-filled"
  onclick={() => {
    toaster.info({
      title: 'This is a toast!'
    });
  }}>Toast</button
>

Closable

Set closable to false to disable the close button toasts.

<script lang="ts">
  import { Toaster, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster();
</script>

<Toaster {toaster}></Toaster>

<button
  class="btn preset-filled"
  onclick={() => {
    toaster.info({
      title: 'This is an unclosable toast!',
      closable: false
    });
  }}>Toast</button
>

Promise

Use promise() to create a toast configured based on the state of a promise. The toast will automatically update based on the state of the promise.

<script lang="ts">
  import { Toaster, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster();

  function getTask() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve(undefined);
        } else {
          reject();
        }
      }, 2000);
    });
  }
</script>

<Toaster {toaster}></Toaster>

<button
  class="btn preset-filled"
  onclick={() => {
    toaster.promise(getTask(), {
      loading: {
        title: 'Loading...',
        description: 'Please wait while the task is being processed.'
      },
      success: () => ({
        title: 'Success',
        description: 'Your request has been completed'
      }),
      error: () => ({
        title: 'Error',
        description: 'An error has occurred'
      })
    });
  }}>Execute Task</button
>

API Reference

Toaster

Property	Type	Description
`toaster` *
`base`	string	Provide base classes for the root element.
`width`	string	Provide width classes for the root element.
`padding`	string	Provide padding classes for the root element.
`rounded`	string	Provide border radius classes for the root element.
`classes`	string	Provide arbitrary classes for the toast cards.
`messageBase`	string	Provide base classes for the message.
`messageClasses`	string	Provide classes for the message.
`titleBase`	string	Provide base classes for the title.
`titleClasses`	string	Provide classes for the title.
`descriptionBase`	string	Provide base classes for the description.
`descriptionClasses`	string	Provide classes for the description.
`btnDismissBase`	string	Provide base classes for the dismiss button.
`btnDismissClasses`	string	Provide arbitrary classes for the dismiss button.
`stateInfo`	string	Provide base classes for info toasts.
`stateSuccess`	string	Provide base classes for success toasts.
`stateWarning`	string	Provide base classes for warning toasts.
`stateError`	string	Provide base classes for error toasts.
`placement`	Placement	The placement of the toast Default: "bottom"
`max`	number	The maximum number of toasts Default: 24
`overlap`	boolean	Whether to overlap the toasts
`duration`	number	The duration of the toast. By default, it is determined by the type of the toast.
`gap`	number	The gap between the toasts Default: 16
`offsets`	string \| Record<"top" \| "bottom" \| "left" \| "right", string>	The offset from the safe environment edge of the viewport Default: "1rem"
`hotkey`		The hotkey that will move focus to the toast group Default: '["altKey", "KeyT"]'
`removeDelay`	number	The duration for the toast to kept alive before it is removed. Useful for exit transitions. Default: 200
`pauseOnPageIdle`	boolean	Whether to pause toast when the user leaves the browser tab Default: false

Property	Type	Description
`toast` *
`index` *	number
`parent` *
`max`	number	The maximum number of toasts Default: 24
`base`	string	Provide base classes for the root element.
`width`	string	Provide width classes for the root element.
`padding`	string	Provide padding classes for the root element.
`rounded`	string	Provide border radius classes for the root element.
`classes`	string	Provide arbitrary classes for the toast cards.
`messageBase`	string	Provide base classes for the message.
`messageClasses`	string	Provide classes for the message.
`titleBase`	string	Provide base classes for the title.
`titleClasses`	string	Provide classes for the title.
`descriptionBase`	string	Provide base classes for the description.
`descriptionClasses`	string	Provide classes for the description.
`btnDismissBase`	string	Provide base classes for the dismiss button.
`btnDismissClasses`	string	Provide arbitrary classes for the dismiss button.
`stateInfo`	string	Provide base classes for info toasts.
`stateSuccess`	string	Provide base classes for success toasts.
`stateWarning`	string	Provide base classes for warning toasts.
`stateError`	string	Provide base classes for error toasts.
`placement`	Placement	The placement of the toast Default: "bottom"
`overlap`	boolean	Whether to overlap the toasts
`duration`	number	The duration of the toast. By default, it is determined by the type of the toast.
`gap`	number	The gap between the toasts Default: 16
`offsets`	string \| Record<"top" \| "bottom" \| "left" \| "right", string>	The offset from the safe environment edge of the viewport Default: "1rem"
`hotkey`		The hotkey that will move focus to the toast group Default: '["altKey", "KeyT"]'
`removeDelay`	number	The duration for the toast to kept alive before it is removed. Useful for exit transitions. Default: 200
`pauseOnPageIdle`	boolean	Whether to pause toast when the user leaves the browser tab Default: false

Alternatives

If you’re looking for power user features or more control over templates, consider using Svelte-French-Toast.