Toast

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

    Source@chakra-ui/toast

Props#

addRole

Type
boolean
Default
false

containerStyle

Description

Optional style overrides for the container wrapping the toast component.

Type
SystemProps

description

Description

The description of the toast

Type
type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode

duration

Description

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

Type
number
Default
5000 ( = 5000ms )

icon

Description

A custom icon that will be displayed by the toast.

Type
type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode

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
Default
false

onClose

Type
() => void

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

status

Description

The status of the toast.

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

title

Description

The title of the toast

Type
type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel