Statuses

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.

Introduction

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

Installation

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

Getting Started

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

import { Toast } from 'ui';
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>

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Toast comes packed with a variety of components to make it stand out.

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.

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.

TooltipRadar Chart