Toast

The Toast component is used to display a notification message to the user.

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

warning

The ToastList component should be placed at the root of your application, and only once. It is responsible for rendering all toasts.

Examples

There are five states for a toast: light, dark, success, warning, or critical. The default state is light.

Name	Type	Default Value	Required	Description
All attributes of a `<div />`
`autoDismiss`	`false \| true`	`true`	No	Should the toast automatically close?
`autoDismissTimeout`	`number`	`6000`	No	How long should the toast be visible before it automatically closes?
`icon`	`ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<any, string \| JSXElementConstructor<any>> \| ForwardRefExoticComponent<any>`		No	Desired icon to show before the content.
`iconSize`	`null \| number \| "md" \| "lg" \| "sm" \| "xl" \| "xs" \| "xxl"`		No	The size of the icon.
`iconStart`	`ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<any, string \| JSXElementConstructor<any>> \| ForwardRefExoticComponent<any>`		No	Desired icon to show before the content. Same as `icon`. @deprecated
`onClose`	`() => void`		No	A callback run when the toast asks to close.
`state`	`"dark" \| "light" \| "highlight" \| "critical" \| "warning" \| "success"`	`'light'`	No	The state of the highlight.
`title`	`ReactNode`		No	A title to display before the content.