# 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.
```html
```
The call takes the words and the tone and answers a function that closes the toast:
```js
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.
```html
```
### How a toast looks
```html
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
```
## 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`](https://github.com/redz-tech/REDZ.UI/blob/main/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 | |