# Flux 2.0 — Toast
A short confirmation that an action worked, with a way to undo it.
Reference: https://flux.kaptio.com/components/toast/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css
## Use it when
Confirms an action whose result is not otherwise visible, such as a booking cancelled from a list or a manifest sent, and offers Undo while it is still cheap. It appears at the bottom corner, is announced politely, stays for a fixed time, and pauses while the pointer or focus is on it.
## Do not use it when
Not for errors; an error stays until it is resolved, so it goes in a Note or beside the field. Not for something the user must act on, or anything they must not miss; that is a Modal or a Note. Not to confirm what is already visible, such as a saved field that now shows its value.
## Markup
### Success with Undo
Booking KB-104933 cancelled.
### Success without an action
Manifest sent to Anna Jónsdóttir.
### Information
Rates for Hotel Vík are being recalculated. This takes about a minute.
### Long message
Departure KB-2026-09-14 moved to 21 September. Confirmations are resent to 14 passengers tonight.
### Stacked
Rates for Hotel Vík are being recalculated. This takes about a minute.
Manifest sent to Anna Jónsdóttir.
Booking KB-104933 cancelled.
### Shown from a button
## API
- flux-toaster (class): The region, with data-flux-toaster and aria-live="polite". Optional in markup; the script adds one.
- flux-toast (class): One toast. data-tone="success" for a completed action; leave it off for neutral information.
- data-flux-toast (attribute): On a button: the message to show when it is pressed. Pair with data-flux-toast-tone and data-flux-toast-action.
- flux-toast event (element): document.dispatchEvent(new CustomEvent("flux-toast", { detail: { message, tone, action: { label, onSelect } } })).
- flux-toast-action (element): Event dispatched on a data-flux-toast button when its toast’s action is pressed.
- flux-toast__actions (class): Holds the action, a small ghost Button, and the dismiss button.
- flux-toast--static, flux-toaster--static (class): Draw a toast, or a stack, in the page flow without the entrance. For documentation only; a static region is not live.
## Accessibility
- The region is polite: the message is read after the current announcement, without moving focus.
- The region must be in the page before the first toast, or the first toast is not announced. The script creates it on load.
- Never put the only way to do something in a toast. Undo must also be reachable from the record, for anyone who misses it.
- Pausing on hover and focus gives time to read and to reach the action, as WCAG 2.2.1 asks.
## Keyboard
- Tab: Reaches the action and the dismiss button in the region, which pauses the timer.
- Escape: Dismisses the focused toast.
## Tokens
- --flux-toast-width | -padding | -gap | -offset | -duration
- --flux-toast-bg | -border | -shadow | -icon | -icon-success | -icon-size
## Do
- Name the record: "Booking KB-104933 cancelled", not "Done".
- Offer Undo for anything destructive that can still be reversed.
- Show one toast per action, after the action has succeeded.
## Do not
- Do not use a toast for an error.
- Do not show a toast and a Note for the same event.
- Do not put links to elsewhere in a toast. It leaves before anyone gets there.