Toast

Multiple notifications may stack up as Toasts, delivering brief feedback in a compact size.

Installation

This component is intended to be used with the Alert component.

Refer to the Alert documentation for setup instructions before using this component.

Install the following dependencies:

npm install sonner

Create a `toast.tsx` file and paste the following code into it.

components/ui/toast.tsx

// CoreUI Toast v0.0.0import { toast as sonnerToast, Toaster, type ToasterProps } from 'sonner';const defaultOptions: ToasterProps = {  className: 'group/toast',  position: 'bottom-center',};const customToast = (  renderFunc: (t: string | number) => React.ReactElement,  options: ToasterProps = {},) => {  const mergedOptions = { ...defaultOptions, ...options };  return sonnerToast.custom(renderFunc, mergedOptions);};const toast = {  ...sonnerToast,  custom: customToast,};export { toast, Toaster };

Create a `toast-alert.tsx` file and paste the following code into it.

components/ui/toast-alert.tsx

import * as React from 'react';import {  RiAlertFill,  RiCheckboxCircleFill,  RiErrorWarningFill,  RiInformationFill,  RiMagicFill,} from '@remixicon/react';import * as Alert from '@/components/ui/alert';import { toast } from '@/components/ui/toast';type AlertToastProps = {  t: string | number;  status?: React.ComponentPropsWithoutRef<typeof Alert.Root>['status'];  variant?: React.ComponentPropsWithoutRef<typeof Alert.Root>['variant'];  message: string;  dismissable?: boolean;  icon?: React.ElementType;};const AlertToast = React.forwardRef<  React.ComponentRef<typeof Alert.Root>,  AlertToastProps>(  (    {      t,      status = 'feature',      variant = 'stroke',      message,      dismissable = true,      icon,    },    forwardedRef,  ) => {    let Icon: React.ElementType;    if (icon) {      Icon = icon;    } else {      switch (status) {        case 'success':          Icon = RiCheckboxCircleFill;          break;        case 'warning':          Icon = RiAlertFill;          break;        case 'error':          Icon = RiErrorWarningFill;          break;        case 'information':          Icon = RiInformationFill;          break;        case 'feature':          Icon = RiMagicFill;          break;        default:          Icon = RiErrorWarningFill;          break;      }    }    return (      <Alert.Root        ref={forwardedRef}        status={status}        variant={variant}        size='small'        className='w-90'      >        <Alert.Icon as={Icon} />        {message}        {dismissable && (          <button type='button' onClick={() => toast.dismiss(t)}>            <Alert.CloseIcon />          </button>        )}      </Alert.Root>    );  },);AlertToast.displayName = 'AlertToast';export { AlertToast as Root };

Add the `Toaster` component in your root layout.

app/layout.tsx

import { Toaster } from '@/components/ui/toast';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  );
}

Check the import paths to ensure they match your project setup.

Examples

Non-dismissable

Sonner Options

API Reference

This component is based on the Sonner package. Refer to their documentation for the API reference.

Toast

On this page