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.

'use client';

import { Toaster, createToaster } from '@skeletonlabs/skeleton-react';

export default function () {
  const toaster = createToaster();
  return (
    <>
      <Toaster toaster={toaster}></Toaster>
      <button
        className="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().

'use client';

import { Toaster, createToaster } from '@skeletonlabs/skeleton-react';

export default function () {
  const toaster = createToaster();
  return (
    <>
      <Toaster toaster={toaster}></Toaster>
      <div className="w-full max-w-72 grid grid-cols-2 gap-2">
        <button
          className="btn preset-filled"
          onClick={() => {
            toaster.info({
              title: 'This is a toast!'
            });
          }}
        >
          Info
        </button>
        <button
          className="btn preset-filled-success-500"
          onClick={() => {
            toaster.success({
              title: 'This is a toast!'
            });
          }}
        >
          Success
        </button>
        <button
          className="btn preset-filled-warning-500"
          onClick={() => {
            toaster.warning({
              title: 'This is a toast!'
            });
          }}
        >
          Warning
        </button>
        <button
          className="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.

'use client';

import { Toaster, createToaster } from '@skeletonlabs/skeleton-react';

export default function () {
  const toaster = createToaster({
    placement: 'bottom-end'
  });
  return (
    <>
      <Toaster toaster={toaster}></Toaster>
      <button
        className="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.

'use client';

import { Toaster, createToaster } from '@skeletonlabs/skeleton-react';

export default function () {
  const toaster = createToaster();

  function getTask() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve(undefined);
        } else {
          reject();
        }
      }, 2000);
    });
  }
  return (
    <>
      <Toaster toaster={toaster}></Toaster>
      <button
        className="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>
    </>
  );
}

Styling for React 18

For React 18 add these styles to your global stylesheet. For React 19+, these styles are set automatically.

[data-scope='toast'][data-part='root'] {
  translate: var(--x) var(--y);
  scale: var(--scale);
  z-index: var(--z-index);
  height: var(--height);
  opacity: var(--opacity);
  will-change: translate, opacity, scale;
}

[data-scope='toast'][data-part='root'] {
  transition:
    translate 400ms,
    scale 400ms,
    opacity 400ms;
  transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
}

[data-scope='toast'][data-part='root'][data-state='closed'] {
  transition:
    translate 400ms,
    scale 400ms,
    opacity 200ms;
  transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
}

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.

Toast

Property	Type	Description
`toast` *
`parent` *
`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.

Alternatives

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