Sonner

Code

<>
  <Toaster />

  <div className="tw:flex tw:flex-wrap tw:gap-2">
    <Button variant="outline" onClick={() => toast("Event has been created.")}>
      Show Toast
    </Button>

    <Button
      variant="outline"
      onClick={() =>
        toast.success("Profile updated.", {
          description: "Your changes have been saved.",
        })
      }
    >
      Success
    </Button>

    <Button
      variant="outline"
      onClick={() => toast.error("Something went wrong.")}
    >
      Error
    </Button>
  </div>
</>

API

Toaster

Name	Type/Description
className	string | undefined
closeButton	boolean | undefined
containerAriaLabel	string | undefined
dir	"rtl" | "ltr" | "auto" | undefined
duration	number | undefined
expand	boolean | undefined
gap	number | undefined
hotkey	string[] | undefined
icons	ToastIcons | undefined
id	string | undefined
invert	boolean | undefined
mobileOffset	Offset | undefined
offset	Offset | undefined
position	Position | undefined
richColors	boolean | undefined
style	CSSProperties | undefined
swipeDirections	SwipeDirection[] | undefined
theme	"light" | "dark" | "system" | undefined
toastOptions	ToastOptions | undefined
visibleToasts	number | undefined