Embossed UI

Search documentation

Search for a page or component.

Toast

A succinct message that is displayed temporarily.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastDemo() {
  function showToast() {
    const id = toast.add({
      title: "Event created",
      description: "Sunday, December 3 at 9:00 AM",
      actionProps: {
        children: "Undo",
        onClick() {
          toast.close(id)
        },
      },
    })
  }

  return (
    <Button variant="secondary" onClick={showToast}>
      Show toast
    </Button>
  )
}

About

Toast is built on Base UI's Toast. It shares the Sonner look: the message sits on a raised card inside a muted shell, and the action and close buttons sit on the shell beside it.

Installation

Run the following command:

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/toast.json

Add the Toaster component

app/layout.tsx
import { Toaster } from "@/components/ui/toast"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Toaster>{children}</Toaster>
      </body>
    </html>
  )
}

Usage

import { toast } from "@/components/ui/toast"
toast.add({
  title: "Event created",
  description: "Sunday, December 3 at 9:00 AM",
})

Examples

Types

Set the type option to show a status icon: success, info, warning, error and loading.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastTypes() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Button
        variant="secondary"
        onClick={() => toast.add({ title: "Event has been created." })}
      >
        Default
      </Button>
      <Button
        variant="secondary"
        onClick={() =>
          toast.add({ type: "success", title: "Event has been created." })
        }
      >
        Success
      </Button>
      <Button
        variant="secondary"
        onClick={() =>
          toast.add({
            type: "info",
            title: "Arrive 10 minutes before the event.",
          })
        }
      >
        Info
      </Button>
      <Button
        variant="secondary"
        onClick={() =>
          toast.add({
            type: "warning",
            title: "The event cannot start before 8:00 AM.",
          })
        }
      >
        Warning
      </Button>
      <Button
        variant="secondary"
        onClick={() =>
          toast.add({
            type: "error",
            title: "The event could not be created.",
            priority: "high",
          })
        }
      >
        Error
      </Button>
    </div>
  )
}

Action

Use actionProps to add an action button.

const id = toast.add({
  title: "Event created",
  actionProps: {
    children: "Undo",
    onClick() {
      toast.close(id)
    },
  },
})

Promise

Use toast.promise to follow an async task from loading to success or error.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastPromise() {
  function showToast() {
    toast.promise(
      new Promise<{ name: string }>((resolve) => {
        window.setTimeout(() => resolve({ name: "Event" }), 2000)
      }),
      {
        loading: "Creating event…",
        success: (data) => `${data.name} created.`,
        error: "Could not create event.",
      }
    )
  }

  return (
    <Button variant="secondary" onClick={showToast}>
      Create event
    </Button>
  )
}

API Reference

toast is a manager from Base UI's createToastManager(): add, close, update and promise. Toaster takes every Toast.Provider prop (limit, timeout, toastManager, …). The parts (Toast, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, ToastViewport, ToastPortal, ToastProvider) and useToastManager are exported for custom layouts.

TextareaToggle