Toast

A toast confirms what you just did when the result is out of view or can still be taken back. It appears at the bottom of the window and leaves by itself.

Example

Ramesh ThapaWelder, SplitOffer
Sita GurungCare assistant, ZagrebOffer
Joel SantosElectrician, RijekaApplied
Harpreet SinghWarehouse operative, ZagrebApplied
Bikash RaiWelder, SplitInterview

When to use it

Use a toast when what you just did moved out of view, such as a candidate who left the list, or when it can still be undone.

Skip it when the change happens in front of you. An interview date that saves in its cell confirms itself.

News from someone else, such as a new application, is a notification. A condition of the page you are on, such as being offline, is an inline message. A choice that must come first, such as withdrawing an offer, is a dialog.

Anatomy

One sentence and at most one action, side by side on one line. The action is blue text. When you point at it, it turns the color of the message.

Candidate archived

Background: Raised glass; --glass-fill-raised
Shadow: Raised; --elevation-3
Corner radius: 16 px; --radius-2xl
Height: 44 px at least
Padding: 10 px by 16 px; --space-4
Gap before the action: 16 px; --space-4
Width: As wide as its words, at most the window less 24 px
Message: 13 px on 20 px, weight 400; --type-caption
Action: The message's type at weight 700, brand blue; --brand-blue
Action target: 24 px high, 44 px on touch
Position: Centered, 24 px above the window's bottom; --space-6
Layer: Above dialogs and popovers; --layer-toast

Tones

A neutral toast reports a result. An error toast reports something you did that did not go through: its words and its action turn red, and it stays until you act on it or press Escape.

There is no green toast, because a result that worked needs no color. A warning is a condition of the page and belongs in an inline message.

Offer sent to Ramesh Thapa

The CV did not upload

Behavior

One toast shows at a time. A new one replaces it, unless the toast on screen still offers Undo: that one keeps its place until its time runs out.

One action on many people gets one toast: 12 candidates archived.

The timer stops while your pointer rests on the toast or focus is inside it.

Undo is also on the item, so a missed toast loses nothing.

On a phone the toast sits above the bottom navigation. While a sheet is open, it moves to the top.

Time on screen: NaN ms
Entrance: Rises undefined px and grows from NaN percent of its size as it fades in, undefined ms; --ease-standard
Exit: Fades out; --duration-fast
Reduced motion: Appears and leaves without moving

Content

Say what happened, in the past tense, and name the thing: Candidate archived, Offer sent to Ramesh Thapa.

The action is one verb that answers the message: Undo, Open, Restore, Try again.

Accessibility

The screen keeps one polite live region from the moment it loads and announces the toast through it once. The toast has no live region of its own, so nobody hears the message twice.

A toast does not take focus. Its action is a real button: Tab reaches it at the end of the page, Enter runs it, and Escape closes the toast while focus is inside.

Permitted and not permitted

Permitted

Candidate archived, with Undo
It says what happened and how to bring it back.

Not permitted

Saved successfully!
The field already shows the saved value.
A toast that asks: Withdraw this offer?
A decision that cannot be undone needs a dialog that waits for you.
Undo that exists only in the toast
Once the toast leaves, the way back is gone. Offer it on the item too.

NextInline message

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

JSON

{
  "title": "Toast",
  "path": "/components/toast",
  "url": "https://design.werklist.com/components/toast",
  "text": "https://design.werklist.com/agent/components/toast",
  "summary": "A short message at the bottom of the window that confirms what you just did, often with Undo.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Toast",
  "purpose": "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.",
  "use": [
    "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"
  ],
  "avoid": [
    "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": [
    {
      "part": "surface",
      "measure": "raised glass",
      "token": "--glass-fill-raised"
    },
    {
      "part": "shadow",
      "token": "--elevation-3"
    },
    {
      "part": "corner radius",
      "measure": "16 px",
      "token": "--radius-2xl"
    },
    {
      "part": "height",
      "measure": "44 px minimum; grows with wrapped text"
    },
    {
      "part": "padding",
      "measure": "10 px top and bottom, 16 px at the sides",
      "token": "--space-4"
    },
    {
      "part": "gap between message and action",
      "measure": "16 px",
      "token": "--space-4"
    },
    {
      "part": "width",
      "measure": "as wide as its words, message and action on one line; at most the window width less 24 px, then the message wraps"
    },
    {
      "part": "message",
      "measure": "13 px on 20 px, weight 400",
      "token": "--type-caption; ink --text"
    },
    {
      "part": "action",
      "measure": "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",
      "token": "--brand-blue"
    },
    {
      "part": "position",
      "measure": "bottom center, 24 px above the window edge; on phones above the bottom navigation, and at the top while a sheet is open",
      "token": "--space-6"
    },
    {
      "part": "layer",
      "token": "--layer-toast"
    }
  ],
  "variants": [
    {
      "name": "neutral",
      "use": "reports a result"
    },
    {
      "name": "error",
      "use": "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": [
    {
      "name": "default",
      "height": "44 px minimum",
      "padding": "10 px by 16 px",
      "type": "message 13/20/400, action 13/20/700"
    }
  ],
  "states": [
    {
      "name": "entering",
      "change": "rises 14 px and grows from 98.5 percent of its size as it fades in, over 240 ms",
      "tokens": [
        "--ease-standard"
      ]
    },
    {
      "name": "resting",
      "change": "stays 5,000 ms"
    },
    {
      "name": "paused",
      "change": "pointer over the toast or focus inside it: the timer stops and resumes with the time left"
    },
    {
      "name": "holding",
      "change": "a toast with Undo keeps its place against newer toasts until its time ends"
    },
    {
      "name": "replaced",
      "change": "a newer toast takes its place; the old one goes without exit motion"
    },
    {
      "name": "leaving",
      "change": "opacity 1 to 0",
      "tokens": [
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "reduced motion",
      "change": "no entrance motion; the toast appears and leaves in place"
    },
    {
      "name": "action hover",
      "change": "the action's ink turns to --text; no underline, no fill",
      "tokens": [
        "--text"
      ]
    },
    {
      "name": "action focus",
      "change": "focus ring on the action",
      "tokens": [
        "--focus-ring",
        "--focus-ring-width",
        "--focus-ring-offset"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "reaches the action, which comes last in the tab order of the page"
    },
    {
      "key": "Enter or Space",
      "action": "runs the action"
    },
    {
      "key": "Escape",
      "action": "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"
  ]
}

Raw file: https://design.werklist.com/agent/components/toast