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.

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.

NameTypeDefaultDescription
children*ReactNodeThe element(s) responsible for handling the Toaster state.
contextContext<ToasterContextValue>Context to read previous values from.
dismissAfternumberInfinity 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.