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 appToaster reference in your root layout.

'use client';

import { Toaster } from '@skeletonlabs/skeleton-react';
import { toaster } from './toaster-react';

export default function () {
  return (
    <>
      <Toaster toaster={toaster}></Toaster>

      {/* ...layout content... */}
    </>
  );
}

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

'use client';

import { toaster } from './toaster-react';

export default function () {
  return (
    <>
      <button
        className="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()

'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

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

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

'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>
    </>
  );
}

Closable

Set closable to false to disable the close button toasts.

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

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

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.