| Name | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | | The element(s) responsible for handling the Toaster state. |
context | Context<ToasterContextValue> | | Context to read previous values from. |
dismissAfter | number | Infinity
| Time in milliseconds to automatically dismiss Toast. Can be set globally on Toaster and overridden individually at a message level. |
onDismiss | (__namedParameters: { id: string; timeout: boolean;}) => void | | Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. |
Toaster
The Toaster component renders short messages to confirm that a user action has completed. Toasts will always appear at the bottom of the viewport.
For more information on how to use the features and props for this component, check out the developer documentation.
Usage
In order for your application to use toasts, the <Toaster> component must wrap your application's content. This top-level component can set a universal dismissAfter in milliseconds, which defines how long a toast message will stay on screen before transitioning out. It can also take an onDismiss callback function for extra handling of the toast dismissal events.
Individual toast messages can be created by calling the push function provided from the ToasterContext which will be injected into your application via the <Toaster> component. A toast will render on screen when the push function is called with an object configuring the toast message. This object must contain the message content, and may optionally override the dismissAfter and onDismiss props set by the top-level component. Toasts are also dismissible by clicking the close Icon.
Toasts must not be used in place of Banners or alternate forms of notifications, nor should they duplicate notifications of the same event. If multiple toasts are pushed within a short amount of time, older toasts will move above newer ones until they are dismissed.