# Toast

Confirms the result of the reader's own action when the result is out of view or can be undone, and offers at most one action.

* Kind: component
* Page: https://design.werklist.com/components/toast
* Version: 2.1.2

## When to use it

* An action changed something out of view, such as a candidate leaving the list
* An action can be undone for a short window
* One action on many items finished: one toast with the count (12 candidates archived)
* An action the reader took did not go through and can be retried or restored

## When not to use it

* The change is visible where the reader made it: no message
* Something happened elsewhere or was done by someone else, such as a new application: Notifications
* A condition of the current page, such as being offline: Inline message
* A decision before an irreversible act, such as withdrawing an offer: Dialog
* Long running work: Progress, where the work started

## Anatomy

* surface: raised glass (--glass-fill-raised)
* shadow (--elevation-3)
* corner radius: 16 px (--radius-2xl)
* height: 44 px minimum; grows with wrapped text
* padding: 10 px top and bottom, 16 px at the sides (--space-4)
* gap between message and action: 16 px (--space-4)
* width: as wide as its words, message and action on one line; at most the window width less 24 px, then the message wraps
* message: 13 px on 20 px, weight 400 (--type-caption; ink --text)
* action: the message's type at weight 700, no underline; --brand-blue in light, --brand-ink in dark, --error-ink in the error tone; --text on hover; target 24 px high, 44 by 44 px on coarse pointers (--brand-blue)
* position: bottom center, 24 px above the window edge; on phones above the bottom navigation, and at the top while a sheet is open (--space-6)
* layer (--layer-toast)

## Variants

* neutral: reports a result
* error: reports an action that did not go through (The CV did not upload) and offers Try again or Restore. Message and action in --error-ink. It stays until acted on, closed with Escape or replaced, and the failure also shows on the item

## Sizes

* default: height 44 px minimum, padding 10 px by 16 px, type message 13/20/400, action 13/20/700

## States

* entering: rises 14 px and grows from 98.5 percent of its size as it fades in, over 240 ms (--ease-standard)
* resting: stays 5,000 ms
* paused: pointer over the toast or focus inside it: the timer stops and resumes with the time left
* holding: a toast with Undo keeps its place against newer toasts until its time ends
* replaced: a newer toast takes its place; the old one goes without exit motion
* leaving: opacity 1 to 0 (--duration-fast, --ease-standard)
* reduced motion: no entrance motion; the toast appears and leaves in place
* action hover: the action's ink turns to --text; no underline, no fill (--text)
* action focus: focus ring on the action (--focus-ring, --focus-ring-width, --focus-ring-offset)

## Keyboard

* Tab: reaches the action, which comes last in the tab order of the page
* Enter or Space: runs the action
* Escape: closes the toast when focus is inside it

## Accessibility

* announced once through the screen's one polite live region, present from load; the toast itself has no role and no aria-live
* takes no focus
* action target at least 24 px, 44 by 44 px on coarse pointers
* Undo is also on the item, so a missed toast loses nothing
* message and action at least 4.5:1 on --glass-fill-raised in both themes

## Content

* message: what happened, past tense, naming the thing ('Candidate archived', 'Offer sent to Ramesh Thapa')
* action: one verb that answers the message (Undo, Open, Restore, Try again)
* one toast for an action on many items, with the count
* no exclamation mark and no 'successfully'

## Tokens

* --glass-fill-raised
* --elevation-3
* --radius-2xl
* --space-4
* --space-6
* --type-caption
* --text
* --brand-blue
* --brand-ink
* --error-ink
* --layer-toast
* --duration-fast
* --ease-standard
* --focus-ring
* --focus-ring-width
* --focus-ring-offset