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.

Preview

Code

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Toast's decked out with several components to make it bangin'.

Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.

Loader

A loader indicates an unknown wait time or process duration, keeping users informed and enhancing their experience by providing visual feedback during delays.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

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:

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

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.

Preview

Code

Positions

The toast can be positioned in four different locations.

Preview

Code

Status

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

Preview

Code

Action

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

Preview

Code

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.

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.

Note Loader