Toast

Introduction

The toast components are built on top of the Sonner library. Shoutout to Emil Kowalski for creating this amazing library.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/toast

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install sonner

Getting started

Put the Toast somewhere in your app layout to make it visible to all your components or pages.

import { Toast } from '@/components/ui/toast';
export default function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <>
      <Toast />
      {children}
    </>
  );
}

And next, just use the toast() function to show a toast.

<Button onPress={() => toast('Someone requested to delete this product')}>
  Delete
</Button>

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install sonner

Next.js

If you're slapping this toast into your Next.js gig, you're gonna wanna roll with the next-themes package to flip the theme on that toast. Peep how you hook it up:

npm install next-themes

Don't forget to include a theme provider component. Check out the setup here.

Inertia.js

When using this toast with Inertia.js, everything will work smoothly if your theme provider is correctly set up. If not, you can find the setup guide here.

Description

To display a toast with a title and a description, the styling is automatically handled. The title will be bold and prominent if a description is included.

Positions

The toast can be positioned in four different locations.

Status

To show a warning or error toast, use the following approach.

Action

To display a toast with an action, use the following method.

Expand

Toast can be expanded to show more content.

<Toast expand />

Hide icon

When this toast has status like success, warning etc, the icon is shown by default. But if you want to disable the icon for a specific toast, you can do it like this.

toast.success(`Copied ${text} to clipboard`, {
  classNames: {
    toast: '[&:has([data-icon])_[data-content]]:ml-0',
    icon: 'hidden'
  }
})

You can turn it off directly from the component to remove it completely. However, this approach may appear unusual when handling toast promises or loading states.

Don't close automatically

Sometimes, you may not want the toast to close automatically. For example, if you have a toast that waits for a user to click a button, you would not want it to close automatically when the button is clicked.

You can do it like this.

toast('Someone requested to delete this product', {
    duration: Infinity,
    cancel: {
        label: 'Cancel',
        onClick: () => alert('Cancelled')
    },
    action: {
        label: 'Delete',
        onClick: () => alert('Deleted')
    },
})