Toast

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feedback to users after an action has taken place.

chakra ui pro

Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.

Import#

import { useToast } from "@chakra-ui/react"

Usage#

Editable Example

Make sure to call useToast at least one component level below the <ChakraProvider> because it needs access to the current theme.

Custom component#

Display a custom component instead of the default Toast UI.

Editable Example

Closing Toasts#

Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method).

Editable Example

Status#

You can use status to change the color of your toasts.

Editable Example

Variants#

Toast uses the same variants as the Alert component.

Editable Example

Changing the toast position#

Using the position prop you can adjust where your toast will be popup from.

Editable Example

Preventing Duplicate Toast#

In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast(...).

function PreventDuplicateExample() {
const toast = useToast()
const id = "test-toast"
return (
<Button
onClick={() => {
if (!toast.isActive(id)) {
toast({
id,
title: "Hey! You can create a duplicate toast",
})
}
}}
>
Click me!
</Button>
)
}

Standalone Toasts#

Use createStandaloneToast to create toasts from outside of your React Components.

import { createStandaloneToast } from "@chakra-ui/react"
const toast = createStandaloneToast()
// const customToast = createStandaloneToast({ theme: yourCustomTheme })
toast({
title: "An error occurred.",
description: "Unable to create user account.",
status: "error",
duration: 9000,
isClosable: true,
})

Props#

description

Description

The description of the toast

Type
ReactNode

duration

Description

The delay before the toast hides (in milliseconds) If set to null, toast will never dismiss.

Type
number | null
Default
5000 ( = 5000ms )

id

Description

The id of the toast. Mostly used when you need to prevent duplicate. By default, we generate a unique id for each toast

Type
string | number

isClosable

Description

If true, toast will show a close button

Type
boolean

onCloseComplete

Description

Callback function to run side effects after the toast has closed.

Type
(() => void)

position

Description

The placement of the toast

Type
"bottom" | "top" | "top-right" | "top-left" | "bottom-right" | "bottom-left"
Default
"bottom"

render

Description

Render a component toast component. Any component passed will receive 2 props: id and onClose.

Type
((props: RenderProps) => ReactNode)

status

Description

The status of the toast.

Type
"info" | "warning" | "success" | "error"

title

Description

The title of the toast

Type
ReactNode

variant

Description

The alert component variant to use

Type
string

Proudly made inNigeria by Segun Adebayo