Toast

Setup

If you don't already have the snippet, run the following command to add the toaster snippet

npx @chakra-ui/cli snippet add toaster

The snippet includes a closed component composition for the Toast component.

Usage

import { Toaster, toaster } from "@/components/ui/toaster"

First, render the Toaster component in your app.

<Toaster />

Then, create a toast by calling the toaster function.

toaster.create({
  title: "Toast Title",
  description: "Toast Description",
})

Examples

Closable Toast

Set the closable prop to true to create a closable toast.

External Close

Use the toaster.dismiss method to close a toast.

• toaster.dismiss(id): Dismiss a toast by its id.
• toaster.dismiss(): Dismiss all toasts.

Types

Here's an example of each type of toast.

With Action

Use the action and actionLabel prop to add an action to the toast.

Persistent Toast

Set the type prop to "loading" to create a persistent toast.

Promise

Use the toaster.promise to create a toast that resolves when the promise is resolved.

Next, you can define the toast options (title, description, etc.) for each state of the promise.

Update

Use toaster.update(...) to modify a visible toast.

Custom Duration

Use the duration prop to set the duration of the toast.

Pause and Play

Use the pause and resume methods on the toaster object to pause and play the toast.

Pausing a toast prevents it from timing out, while resuming it will reenable the timeout using the remaining duration.

Lifecycle

Use the onStatusChange prop on the toaster function to listen for changes to the toast's status.

Maximum Visible Toasts

Set the max prop on the createToaster function to define the maximum number of toasts that can be rendered at any one time. Any extra toasts will be queued and rendered when a toast has been dismissed.

const toaster = createToaster({
  max: 3,
})

Placement

Toasts can be displayed on all four corners of a page. We recommend picking one desired position and configure it in the createToaster function.

const toaster = createToaster({
  placement: "top-end",
})

Overlapping Toasts

By default, toasts are stacked on top of each other. To make the toasts overlap each other, set the overlap prop to true in the createToaster function.

const toaster = createToaster({
  placement: "top-end",
  overlap: true,
})

Page Idle Behavior

Pause toast timers when the page is idle/hidden.

const toaster = createToaster({
  pauseOnPageIdle: true,
})

Offset

Set the offsets prop in the createToaster function to offset the toasts from the edges of the screen.

const toaster = createToaster({
  offsets: "20px",
})

Alternatively, you can use the offsets prop to set the offset for each edge of the screen.

const toaster = createToaster({
  offsets: { left: "20px", top: "20px", right: "20px", bottom: "20px" },
})

Props

Toaster

Root

Title

Description

ActionTrigger

CloseTrigger