Toast

Gives the vibe and easy access for a toast component. Toasts show quick, temporary alerts about actions, errors, or other events in an app.

Basic

This is the basic toast component. First, in your root app component, import the Toast component.

import { Toast } from 'ui'

Then, add the Toast component to your app.

const App = () => {
    return <Toast />
}

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

Installation

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:

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

Important Setup for Remix

If you're using this toast with Remix, you'll need to set up a few things. You can find more details on the issue here.