Toast

An opinionated toast component for React.

Preview
Code

import Button from '@dinui/react/button'
import toast from '@dinui/react/toast'

export default function ToastDemo() {
  return (
    <div className="flex items-center gap-6 flex-wrap">
      <Button
        variant="outline"
        onClick={() =>
          toast('Event has been created', {
            description: 'Sunday, December 03, 2023 at 9:00 AM',
          })
        }
      >
        Default
      </Button>

      <Button
        variant="outline"
        onClick={() =>
          toast('Event has been created', {
            description: 'Sunday, December 03, 2023 at 9:00 AM',
            action: {
              label: 'Undo',
              onClick: () => alert('Undo'),
            },
          })
        }
      >
        With Action
      </Button>

      <Button variant="outline" onClick={() => toast.error('Event has not been created')}>
        Error
      </Button>

      <Button variant="outline" onClick={() => toast.success('Event has been created')}>
        Success
      </Button>

      <Button
        variant="outline"
        onClick={() => toast.info('Be at the area 10 minutes before the event time')}
      >
        Info
      </Button>

      <Button
        variant="outline"
        onClick={() => toast.warning('Event start time cannot be earlier than 8am')}
      >
        Warning
      </Button>

      <Button
        variant="outline"
        onClick={() => {
          const promise = () =>
            new Promise((resolve) => setTimeout(() => resolve({ name: 'Toast' }), 2000))

          toast.promise(promise, {
            loading: 'Loading...',
            success: (_data) => {
              return `Toast has been added`
            },
            error: 'Error',
          })
        }}
      >
        Promise
      </Button>

      <Button
        variant="outline"
        onClick={() => toast(<div className="text-sm">A custom toast with default styling</div>)}
      >
        Custom
      </Button>
    </div>
  )
}

Installation

Follow Installation Guide

To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

Add the Toaster component to your root layout

import { Toaster } from '@dinui/react/toast'

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

All done

You now can start using this component in your project.

Follow Installation Guide

To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

Run the following command in your project

npx @dinui/cli@latest add toast

yarn dlx @dinui/cli@latest add toast

pnpm dlx @dinui/cli@latest add toast

bunx @dinui/cli@latest add toast

Add the Toaster component to your root layout

import { Toaster } from '@dinui/react/toast'

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

Update the import paths to match your project setup
All done

You now can start using this component in your project.

Follow Installation Guide

To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

Install dependencies

npm install sonner tailwind-variants sonner

yarn add sonner tailwind-variants sonner

pnpm add sonner tailwind-variants sonner

bun add sonner tailwind-variants sonner

Copy and paste the following code into your project

'use client'

import { button } from '@dinui/react/button'
import { Toaster as ToasterPrimitive, toast } from 'sonner'
import { tv } from 'tailwind-variants'

const toaster = tv({
  slots: {
    root: 'toaster group z-50',
    toast: [
      'group toast bg-bg--contrast shadow-lg',
      'flex items-center gap-2',
      'w-full p-4 border rounded-md',
      '[&>[data-content]]:pr-4',
      '[&>[data-icon]]:text-fg-weak',
      '[&[data-type=error]>[data-icon]]:text-fg-danger',
      '[&>[data-button=true][data-cancel=true]]:bg-bg--contrast',
    ],
    title: 'text-[0.8125rem] font-medium',
    description: 'mt-1 text-[0.8125rem] text-fg-weaker',
    actionButton: button({ size: 'xs' }).root(),
    cancelButton: button({ size: 'xs', variant: 'ghost' }).root(),
  },
})

const Toaster = ({ ...props }: React.ComponentPropsWithoutRef<typeof ToasterPrimitive>) => {
  const { root, toast, title, description, actionButton, cancelButton } = toaster()

  return (
    <ToasterPrimitive
      theme={'__inherit__' as 'light'}
      {...props}
      className={root({ className: props.className })}
      toastOptions={{
        unstyled: true,

        ...props.toastOptions,

        classNames: {
          ...props.toastOptions?.classNames,

          toast: toast({ className: props.toastOptions?.classNames?.toast }),
          title: title({ className: props.toastOptions?.classNames?.title }),
          description: description({ className: props.toastOptions?.classNames?.description }),
          actionButton: actionButton({ className: props.toastOptions?.classNames?.actionButton }),
          cancelButton: cancelButton({ className: props.toastOptions?.classNames?.cancelButton }),
        },
      }}
    />
  )
}

export default toast
export { toaster, Toaster }
export * as ToastPrimitive from 'sonner'

Add the Toaster component to your root layout

import { Toaster } from '@dinui/react/toast'

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

Update the import paths to match your project setup
All done

You now can start using this component in your project.