Toast

Introduction

The toast components use Sonner by Emil Kowalski.

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/toast

Manual installation

Install the dependencies, then copy the component source into your project.

npm install sonner cn

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

Call toast() to display a notification.

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

Next.js

Use next-themes to match the toast theme to your Next.js application:

npm install next-themes

Add a theme provider as described in the Next.js dark mode guide.

Inertia.js

For Inertia.js, configure the provider using the Inertia.js dark mode guide.

Examples

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

Status toasts, such as success and warning messages, display an icon by default. Hide it for an individual toast with these classes:

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

Hiding icons globally also hides the indicators used by loading and promise toasts.

Don't close automatically

Set duration: Infinity to keep a toast open until the user dismisses it or selects an action.

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

Component API