Toast

A succinct message that is displayed temporarily.

Example

Usage

Toaster

The <Toaster /> component is where your toasts are displayed. You can place it anywhere in your app, but it’s recommended to place it at the root of your app.

import { Toaster } from "~/components/ui/toast"

<html>
  <body>
    <main>{children}</main>
    <Toaster />
  </body>
</html>

showToast()

The showToast function creates a <Toast /> component that is shown using the <Toaster /> component, that was set up above.

import { showToast } from "~/components/ui/toast"

<Button
  onClick={() =>
    showToast({ title: "Event added.", description: "Friday, February 10, 2023 at 5:57 PM" })
  }
>
  Show Toast
</Button>