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