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 feeback to users after an action has taken place.

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

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

Success#

Editable Example

Warning#

Editable Example

Error#

Editable Example

Position#

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

Editable Example

Standalone#

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#

NameTypeDefaultDescription
titleReact.ReactNodeThe title of the toast.
isClosablebooleanfalseIf true adds a close button to the toast.
onClosefunctionCallback function to close the toast.
descriptionReact.ReactNodeThe description of the toast.
statusdefault, success, error, warning, infoThe status of the toast.
durationnumber5000msDuration before dismiss in milliseconds, or null to never dismiss.
positiontop, top-left, top-right, bottom, bottom-left, bottom-rightbottomPosition the toast will popup out from.
render(props: {onClose:() => void, id: string}) => React.ReactNodeCallback function to display a custom toast.
Edit this page