https://user-images.githubusercontent.com/36730035/220868994-f0c92862-7e7d-487c-ab3a-540e7b48ab4a.mp4

This fork only changes so styles.css don't get imported into the bundle

Introduction

Sonner is an opinionated toast component for React. It's customizable, but styled by default. Comes with a swipe to dismiss animation.

Usage

To start using the library, install it in your project:

npm install sonner

Add <Toaster /> to your app, it will be the place where all your toasts will be rendered. After that you can use toast() from anywhere in your app.

import { Toaster, toast } from 'sonner';

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  );
}

Types

Default

Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.

toast('Event has been created');

With custom icon and description:

toast('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm',
  icon: <MyIcon />,
});

Success

Renders a checkmark icon in front of the message.

toast.success('Event has been created');

Error

Renders an error icon in front of the message.

toast.error('Event has not been created');

Action

Renders a button.

toast('Event has been created', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo'),
  },
});

Promise

Starts in a loading state and will update automatically after the promise resolves or fails.

toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
  loading: 'Loading',
  success: 'Success',
  error: 'Error',
});

You can pass a function to the success/error messages to incorporate the result/error of the promise.

toast.promise(promise, {
  loading: 'Loading...',
  success: (data) => {
    return `${data.name} has been added!`;
  },
  error: 'Error',
});

Custom JSX

You can pass jsx as the first argument instead of a string to render custom jsx while maintaining default styling. You can use the headless version below for a custom, unstyled toast.

toast(<div>A custom toast with default styling</div>);

Customization

Headless

You can use toast.custom to render an unstyled toast with custom jsx while maintaining the functionality.

toast.custom((t) => (
  <div>
    This is a custom component <button onClick={() => toast.dismiss(t)}>close</button>
  </div>
));

Theme

You can change the theme using the theme prop. Default theme is light.

<Toaster theme="dark" />

Position

You can change the position through the position prop on the <Toaster /> component. Default is bottom-right.

// Available positions
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right

<Toaster position="top-center" />

Expanded

Toasts can also be expanded by default through the expand prop. You can also change the amount of visible toasts which is 3 by default.

<Toaster expand visibleToasts={9} />

Styling for all toasts

You can style your toasts globally with the toastOptions prop in the Toaster component.

<Toaster
  toastOptions={{ style: { background: 'red' }, className: 'my-toast', descriptionClassName: 'my-toast-description' }}
/>

Styling for individual toast

toast('Event has been created', {
  style: {
    background: 'red',
  },
  className: 'my-toast',
  descriptionClassName: 'my-toast-description',
});

Close button

Add a close button to all toasts that shows on hover by adding the closeButton prop.

<Toaster closeButton />

Rich colors

You can make error and success state more colorful by adding the richColors prop.

<Toaster richColors />

Custom offset

Offset from the edges of the screen.

<Toaster offset="80px" />

Programmatically remove toast

To remove a toast programmatically use toast.dismiss(id).

const toastId = toast('Event has been created');

toast.dismiss(toastId);

You can also use the dismiss method without the id to dismiss all toasts.

// Removes all toasts

toast.dismiss();

Programmatically remove toast

You can change the duration of each toast by using the duration property, or change the duration of all toasts like this:

<Toaster duration={10000} />

toast('Event has been created', {
  duration: 10000,
});

// Persisent toast
toast('Event has been created', {
  duration: Infinity,
});

Keyboard focus

You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.

<Toaster hotkey={['KeyC']} />