Toast is a lightweight notification component that response to a user's action. Most often toasts are displayed either at the top or bottom of a page but can be positioned wherever makes most sense. There can exist more than one toast on the page at any given time.

A Toaster component is a container holding a list of toasts. The Toaster component is used mainly used to render the children Toast components. Although multiple Toaster components can exist on a page at the same time, it is important to note the position to prevent hidden / overlapping of the components.

Included Components

  1. Toast: Use the Toast component to display notices to the user.
  2. Toaster: Use the Toaster component to house multiple Toast components.


An error occurred in saving the file.
Sucessfully saved!



1import React from "react";
2import { Toast } from "@commure/components-foundation";
4function MyToast() {
5 return <Toast intent={Intent.DANGER} message={"Danger zone!"} />;
8export default MyToast;


1import React from "react";
2import { Toast, Toaster } from "@commure/components-foundation";
4function MyToaster() {
5 return (
6 <Toaster position={Position.TOP}>
7 <Toast
8 intent={Intent.WARNING}
9 message={"An Error has occurred"}
10 timeout={0}
11 onDismiss={() => this.setState({ error: false })}
12 />
13 </Toaster>
14 );
17export default MyToaster;

API Reference


Prop NameRequired?TypeDescription
actionfalseIActionProps & ILinkPropsAction rendered as a minimal `AnchorButton`. The toast is dismissed automatically when the user clicks the action button. Note that the `intent` prop is ignored (the action button cannot have its own intent color that might conflict with the toast's intent). Omit this prop to omit the action button.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render before the message.
intentfalseIntentVisual intent color to apply to element.
messagetrueReact.ReactNodeMessage to display in the body of the toast.
onDismissfalse(didTimeoutExpire: boolean) => voidCallback invoked when the toast is dismissed, either by the user or by the timeout. The value of the argument indicates whether the toast was closed because the timeout expired.
timeoutfalsenumberMilliseconds to wait before automatically dismissing toast. Providing a value less than or equal to 0 will disable the timeout (this is discouraged).


Prop NameRequired?TypeDescription
autoFocusfalsebooleanWhether a toast should acquire application focus when it first opens. This is disabled by default so that toasts do not interrupt the user's flow. Note that `enforceFocus` is always disabled for `Toaster`s.
canEscapeKeyClearfalsebooleanWhether pressing the `esc` key should clear all active toasts.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
positionfalseToasterPositionPosition of `Toaster` within its container. Note that only `TOP` and `BOTTOM` are supported because Toaster only supports the top and bottom edge positioning.
usePortalfalsebooleanWhether the toaster should be rendered into a new element attached to `document.body`. If `false`, then positioning will be relative to the parent element. This prop is ignored by `Toaster.create()` as that method always appends a new element to the container.

Related Reading

Toast Blueprint Reference
Toaster Blueprint Reference