Toast (beta) - Skeleton

We recommend implementing a single instance of <Toaster> in global scope of your app, typically within a root layout. This single instance will manage a toast group with a toaster instance (via createToaster). Style props applied to the <Toaster> component are applied all child toasts created within that instance.

<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 a toast!'
    });
  }}>Toast</button
>

Type

You can use the generic create() method in combination with a specific type, or opt for the shorthand methods if preferred: info(), success(), warning(), or 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

Use the placement prop on <Toaster> to set the position of the toast group.

<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
>

Promise

Use promise() to create a toast that is able to be 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

Toast

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.