toast

toast
Not required
object
text
Required
string/elementType
type
Not required
("info" | "success" | "error" | "cta")
"info"
title
Not required
string/elementType
actions
Not required
array
icon
Not required
string/elementType
handleClose
Not required
func
closable
Not required
bool

Toast is used for displaying messages that shoot out of a corner of the page like a toast. We use the toast as shown below:

Programmatic Control with ID and Dismiss

There are two ways to work with toast IDs:

  1. Use the returned ID: The toast() function returns an ID that you can use to dismiss the toast later
  2. Specify a custom ID: Pass an id prop to ensure only one toast with that ID exists at a time. Calling toast() again with the same ID will update the existing toast instead of creating a new one.

Updating Existing Toasts

When you specify a custom id, calling toast() again with the same ID will update the existing toast instead of creating a new one. This is useful for showing progress or changing states: