Toast()

Use it to render a toast. You can call it from anywhere, even outside of React.

Rendering the toast

You can call it with just a string.

import { toast } from 'mui-sonner';
 
toast('Hello World!');

Or provide an object as the second argument with more options. They will overwrite the options passed to <Toaster /> if you have provided any.

import { toast } from 'mui-sonner';
 
toast('My toast', {
  description: 'My description',
  duration: Infinity,
  icon: <MyIcon />,
  closeButton: true,
});

Creating toasts

Success

Renders a checkmark icon in front of the message.

toast.success('My success toast');

Error

Renders an error icon in front of the message.

toast.error('My error toast');

Action

Renders a primary button, clicking it will close the toast and run the callback passed via onClick. You can prevent the toast from closing by calling event.preventDefault() in the onClick callback.

toast('My action toast', {
  action: {
    label: 'Action',
    onClick: () => console.log('Action!'),
  },
});

Promise

Starts in a loading state and will update automatically after the promise resolves or fails. You can pass a function to the success/error messages to incorporate the result/error of the promise.

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

Loading

Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.

toast.loading('Loading data');

Dynamic Position

You can change the position of the toast dynamically by passing a position prop to the toast function. It will not affect the positioning of other toasts.

// Available positions:
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
toast('Hello World', {
  position: 'top-center',
});

Other

Updating toasts

You can update a toast by using the toast function and passing it the id of the toast you want to update, the rest stays the same.

const toastId = toast('mui-sonner');
 
toast.success('Toast has been updated', {
  id: toastId,
});

On Close Callback

You can pass onDismiss and onAutoClose callbacks to each toast. onDismiss gets fired when either the close button gets clicked or the toast is swiped. onAutoClose fires when the toast disappears automatically after it's timeout (duration prop).

toast('Event has been created', {
  onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
  onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`),
});

Dismissing toasts programmatically

To remove a toast programmatically use toast.dismiss(id). The toast() function return the id of the toast.

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

You can also dismiss all toasts at once by calling toast.dismiss() without an id.

toast.dismiss();

API Reference