Save 15% on all Justd Blocks
Components

Toast

A non-intrusive, auto-dismissable notification component used to display brief status updates, alerts, or confirmation messages.

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

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Toast comes packed with several components to enhance functionality and provide a seamless experience.

Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.
A lightweight and visually appealing loading indicator that enhances user experience by signaling ongoing background processes.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

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:

Make sure you also install the composed components and the required packages for the component to function properly.

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.