Toast

The toast component is used to give feedback to users after an action has taken place.

    SourceTheme source@chakra-ui/toast

Props#

colorScheme

Description

Color Schemes for useToast are not implemented in the default theme. You can extend the theme to implement them.

Type
(string & {})

containerStyle

Description

Optional style overrides for the container wrapping the toast component.

Type
CSSProperties

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 )

icon

Description

A custom icon that will be displayed by the toast.

Type
ReactNode

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
ToastId

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
ToastPosition
Default
"bottom"

render

Description

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

Type
((props: RenderProps) => ReactNode)

size

Description

Sizes for useToast are not implemented in the default theme. You can extend the theme to implement them.

Type
string

status

Description

The status of the toast.

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

title

Description

The title of the toast

Type
ReactNode

variant

Description

Variants for useToast are not implemented in the default theme. You can extend the theme to implement them.

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel