Toast 🍞

Last modified:

Toasts give users updates about system activity, placed at the bottom of the screen.

React documentation

Last modified:


Toast is available as a React component with BcToast.

BcToast uses an instance of ToastStore to keep and manage messages.

BcToast follows a singleton pattern and you only need 1 instance of it in your application. All you need to do use the methods of the ToastStore.

BcToast Props

timeoutnumberoptional6000The time before the toast is auto-dismissed.

BcToast methods

The BcToast component also provides 4 methods:

  1. BcToast.message
  2. BcToast.error
  3. BcToast.success
  4. BcToast.warning

These methods are just wrappers around an instance of the ToastStore methods. Please see ToastStore section below.


BcToastMessage is the actual component which renders the BcPageAlert to display the message to the user.

As a developer, you will not have to interact with this component. The only way to interact with this component is via BcToast and the methods exposed on BcToast.

BcToastMessage Props

BcToastMessage props extends ToastMessage.

Additional Props
timeoutbooleanoptional6000Time in milliseconds before the toast is automatically dismissedauto-dismiss.


The ToastStore is a state management class for toast messages and BcToast creates an instance of ToastStore to subscribe to events from that store.

ToastStore leverages React’s useExternalSyncStore API but also exposes getters and setters to interact with the private static field toastMessage.

ToastMessage signature

autoDismissbooleanNofalseIf you need a toast to dismiss automatically, then set autoDismiss to the message.

autoDismiss is set at the message level so you can decide which message can be auto dismissed and which cannot.

The autoDismiss counter will only start once the message is rendered to the user.

When autoDismiss is on, interactivity props are spread on the toast such that hovering over the toast will prevent dismissal and moving off the toast will restart the dismissal countdown.
contentstringYesThis is the SHORT message to display to the user

There is a width limit on the ToastMessage component of 400px so if your message is longer than that width, the toast will get taller; and no there is no props to change that width. So try to keep your message short and sweet.
type"error" | "success" | "warning"NoUpdate the color of the toast message.

The toast message styling follows the BcPageAlert styling. Linking it to BcPageAlertVariant so we are aware of changes in BcPageAlert which might affect our toast.
addMessageToastMessageThis method allows you to add a custom message to the store.
error(message: string, autoDismiss: boolean ) => voidDisplay an error toast. autoDismiss is set to true by default.
success(message: string, autoDismiss: boolean ) => voidDisplay a success toast. autoDismiss is set to true by default.
warning(message: string, autoDismiss: boolean ) => voidDisplay a warning toast. autoDismiss is set to true by default.


Last modified:

When creating Toasts, they should be an ARIA live region. Please read more about accessibility

To make sure the ARIA live region works properly, make sure only the content of the Toast is updated and not the whole Toast element.


Last modified:

Toasts are styled as “floating” super-imposed Page alerts.

Toasts are positioned at the bottom of the screen to indicate their app or page-wide status.

Toasts are positioned with a z-index in the foreground layer. This ensures they display above the page but not above modals or modal overlays.

The ToastMessage component has a width of 25rem so if your message is longer than that width, the toast will get taller; and no there is no props to change that width. So try to keep your message short and sweet.


Last modified:

Toast notifications give users important alerts so making them accessible is important.

Toasts are ARIA live regions with minor differences in ARIA attributes, eg. error and success have a different role:

TypeARIA role‘Politeness’

Finally give Toasts an aria-label to provide a summarizing title for the Toast’s content.


Last modified:

We used the name ‘Toast’ because of the way updates ‘pop-up’ from the bottom of the screen.

Toasts are non-disruptive in nature and intended to provide an at-a-glance feedback of an action. This is the reason they appear at the bottom of the screen, because they are out of the way and temporary.

Typically toasts should be used for success/informational system messages rather than errors, this is because errors typically require a subsequent action that the user must perform to continue. So given the temporary and brief nature of toasts, it can be hard to understand what the user needs to do, therefore a page alert might be more suitable. (This one might be better elsewhere)

See also

Last modified: