Toasts

A notice after an action - saved, failed, moved with a way to undo - shown by REDZ.ui.toast() in a stack at the corner of the screen and read aloud from a live region.

Examples

Success and info leave after 8 seconds, unless the pointer or the focus rests on them. An error, and a notice with an action, stay until closed.

<button class="btn" type="button" data-docs-run="toast-success">Saved</button>
<button class="btn" type="button" data-docs-run="toast-info">Import started</button>
<button class="btn" type="button" data-docs-run="toast-danger">Not saved</button>
<button class="btn" type="button" data-docs-run="toast-action">With an action</button>

The call takes the words and the tone and answers a function that closes the toast:

const close = REDZ.ui.toast({title: 'Moved to the archive', tone: 'info', action: {label: 'Undo', run: restore}});

The stack

The page carries the stack from the start, so that screen readers know its live regions before anything is said in them: role="status" for notices, role="alert" for errors. Without one, the library adds it at load.

<div class="toast-container"><div role="status"></div><div role="alert"></div></div>

How a toast looks

Saved

North Bay · 3 pages rebuilt

Import started

You can leave this page.

Saved without the Thai text

Not saved

The connection was lost; try again.

Moved to the archive

<div class="toast toast-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><div class="toast-body"><strong>Saved</strong><div class="text-muted fs-12">North Bay · 3 pages rebuilt</div></div><button class="btn-close" type="button" aria-label="Close"></button></div>
<div class="toast toast-info"><i class="bi bi-info-circle-fill" aria-hidden="true"></i><div class="toast-body"><strong>Import started</strong><div class="text-muted fs-12">You can leave this page.</div></div><button class="btn-close" type="button" aria-label="Close"></button></div>
<div class="toast toast-warning"><i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i><div class="toast-body"><strong>Saved without the Thai text</strong></div><button class="btn-close" type="button" aria-label="Close"></button></div>
<div class="toast toast-danger"><i class="bi bi-x-octagon-fill" aria-hidden="true"></i><div class="toast-body"><strong>Not saved</strong><div class="text-muted fs-12">The connection was lost; try again.</div></div><button class="btn-close" type="button" aria-label="Close"></button></div>
<div class="toast toast-primary"><i class="bi bi-bell-fill" aria-hidden="true"></i><div class="toast-body"><strong>Moved to the archive</strong></div><button class="btn btn-sm" type="button">Undo</button><button class="btn-close" type="button" aria-label="Close"></button></div>

Keyboard and accessibility

A toast never takes the focus; its close button and its action are in the tab order at the end of the page.
While a modal dialog is open, toasts show inside it, since everything outside it is inert.
The close button's name comes from the page's texts: close in the island #redz-ui-text.
Nothing a person must act on lives only in a toast that leaves by itself.

Tokens

From css/components/toast.css. It declares --redz-toast-mark on its root, never on rows or items.

It reads the theme's --redz-space-16, --redz-space-8, --redz-text-faint, --redz-space-12, --redz-border, --redz-radius-12, --redz-bg-raised, --redz-shadow-2, --redz-primary, --redz-success, --redz-danger, --redz-warning, --redz-info.

From Bootstrap 5.3

Bootstrap 5.3	REDZ.UI	Change	Note
`toast-header`	-	review	REDZ.ui.toast builds the toast from its title, text and tone
`data-bs-dismiss="toast"`	-	remove	REDZ.ui.toast adds its close button
`bootstrap.Toast`	`REDZ.ui.toast({title, text, tone})`	trigger