Toast

Introduction

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.

Examples

An error occurred in saving the file.
Sucessfully saved!

Usage

Toast

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

Toaster

import React from "react";
import { Toast, Toaster } from "@commure/components-foundation";
function MyToaster() {
return (
<Toaster position={Position.TOP}>
<Toast
intent={Intent.WARNING}
message={"An Error has occurred"}
timeout={0}
onDismiss={() => this.setState({ error: false })}
/>
</Toaster>
);
}
export default MyToaster;

API Reference

Toast

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).

Toaster

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