Skeleton

This feature is currently available as an early access Beta preview, meaning the features and API are not yet stable. This feature is not yet recommended for production use as breaking changes may occur. Please use this feature with caution.

Setup the Provider

Wrap the contents of your app with ToastProvider in your root layout. We’ll interface with this using the Svelte Context API.

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

<ToastProvider>
  {@render children()}
</ToastProvider>

Create a Toast

There are three available types of toasts: info | error | success, with info being the default.

<script lang="ts">
  import { getContext } from 'svelte';
  import { type ToastContext } from '@skeletonlabs/skeleton-svelte';

  export const toast: ToastContext = getContext('toast');

  function triggerInfo() {
    toast.create({ description: 'Hello World! 👋' });
  }

  function triggerError() {
    toast.create({
      title: 'Error',
      description: 'Uh oh, something went wrong.',
      type: 'error'
    });
  }

  function triggerSuccess() {
    toast.create({
      title: 'Success',
      description: 'The task was was completed successfully!',
      type: 'success'
    });
  }
</script>

<div class="flex gap-4">
  <button class="btn preset-tonal" onclick={triggerInfo}>Toast: Info</button>
  <button class="btn preset-tonal" onclick={triggerError}>Toast: Error</button>
  <button class="btn preset-tonal" onclick={triggerSuccess}>Toast: Success</button>
</div>

API Reference

ToastProvider

Property	Type	Description
`placement`	"top-start" \| "top-end" \| "bottom-start" \| "bottom-end"	Offset from the viewport edge. Default: bottom-end
`offset`	string	Offset from the viewport edge. Default: 16px
`dismissLabel`	string	The dismiss button label text. Default: ×
`groupBase`	string	Provide base classes for the root element.
`groupZIndex`	string	Provide z-index classes for the root element.
`groupGap`	string	Provide gap classes for the root element.
`groupClasses`	string	Provide arbitrary classes for the root element.
`toastBase`	string	Provide base classes for the toast cards.
`toastPadding`	string	Provide padding classes for the toast cards.
`toastGap`	string	Provide gap classes for the toast cards.
`toastShadow`	string	Provide shadow classes for the toast cards.
`toastClasses`	string	Provide arbitrary classes for the toast cards.
`messageBase`	string	Provide base classes for the message region.
`messageTitle`	string	Provide classes for the message title text.
`messageDescription`	string	Provide classes for the message description text.
`messageClasses`	string	Provide arbitrary classes for the message region.
`btnDismissBase`	string	Provide base classes for the dismiss button.
`btnDimissPreset`	string	Provide preset classes for the dismiss button.
`btnDismissHover`	string	Provide hover classes for the dismiss button.
`btnDismissClasses`	string	Provide arbitrary classes for the dismiss button.
`stateInfo`	string	Provide base classes for info toasts.
`stateError`	string	Provide base classes for error toasts.
`stateSuccess`	string	Provide base classes for success toasts.
`children`	Snippet<[]>	The default child slot for the toast provider.