Toast
The Toast component (be-toast) renders a transient Bootstrap notification that appears fixed to the bottom-right corner of the viewport. It uses the Beryllium datasource template (Title + Copy) and is controlled by the shared message system — a Trigger determines when the toast appears and a Storage mechanism remembers whether the user has dismissed it.
Toasts are non-blocking and auto-dismissible. They are ideal for brief status messages, promotional alerts, or cookie/consent notices that should not interrupt the user’s workflow. The component renders a standard Bootstrap .toast element with a header (title + close button) and body (rich-text copy).
Examples
Live Example
Below is a livebe-toast rendering. It is configured with the default Exit trigger and Session storage. When you navigate away from this page (or close the tab) and return within the same browser session, the toast will not appear again. Clear your session storage to reset it. The toast appears fixed to the bottom-right of the viewport with a title header and dismissible close button.
This is a live toast notification. It appears in the bottom-right corner of the page and can be dismissed by clicking the close button.
Usage Notes
Notes
- The Toast uses the Beryllium datasource template which provides Title, Copy, Image, and Link fields. Only Title and Copy are rendered by the toast view.
- The toast container uses
position-fixed bottom-0 end-0 p-3to anchor it at the bottom-right of the viewport. In Experience Editor, the fixed positioning is removed so the component is visible inline for editing. - The Trigger parameter controls when the toast appears. The default value is Exit (the toast shows when the user attempts to leave the page). Other trigger values can be configured via the message trigger dictionary.
- The Storage parameter controls how dismissal is remembered. The default is Session storage, meaning the toast will not reappear until the browser session ends. Other options include Local (persistent) or None (always show).
- The
data-reset-on-close="true"attribute ensures the toast’s dismissed state is recorded when the close button is clicked. - The
data-message-idattribute uses the rendering’s unique HTML ID to key the storage entry, so multiple toasts on a site can be tracked independently. - Toasts share the same message parameter system as Modal and Alert components. If you are familiar with configuring modal triggers and storage, the same options apply here.
- The
AddClassparameter can be used to apply custom CSS classes for styling variations (e.g. background colours, border styles).
Control Properties
Control Properties
Rendering Parameters
| Parameter | Type | Description |
|---|---|---|
| Trigger | Droplink | Determines when the toast is shown. Default: Exit (shows on page exit intent). Options are defined in the message trigger dictionary. |
| Storage | Droplink | How dismissal state is persisted. Default: Session (sessionStorage). Options: Local (localStorage, persistent), None (always show). |
| AddClass | Single-Line Text | Additional CSS class(es) appended to the toast element for custom styling. |
| data-testid | Single-Line Text | Optional test identifier attribute added to the container for automated testing selectors. |
Datasource Fields (Beryllium)
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | Displayed in the toast header as a bold label (e.g. “Welcome!”, “Cookie Notice”). |
| Copy | Rich Text | The toast body content. Supports HTML formatting. |
| Image | Image | Not rendered by the default toast view but available on the datasource template. |
| Link | General Link | Not rendered by the default toast view but available on the datasource template. |