Core · Feedback and status

Toast

Confirms a small result, such as "Draft saved", without interrupting the reader.

components/toast.css
No JavaScript
Light · Dark · High contrast
1 known issue

Example

A toast that confirms an export, shown as a static specimen.

Success

File exported.

A static specimen: LUZ draws the toast, and you place it, show it and hide it.

Known issues

LUZ ships the look only. The live region, the placement, the timing and the close button's behaviour are yours to build, and to make accessible.

Code

Copy the markup

Keep an empty live region on the page, and put the toast inside it when the result happens.

HTML

<div role="status">
  <div class="luz-toast">
    <div class="luz-toast__content">
      <div class="luz-toast__kind">Saved</div>
      <div class="luz-toast__msg">Draft saved.</div>
    </div>
    <button class="luz-toast__close" type="button" aria-label="Dismiss notification">×</button>
  </div>
</div>

Variants and options

There are no modifiers.

Class	What it does
`.luz-toast`	A raised box on the strong surface, 320 px wide at most and never wider than its container
`.luz-toast__kind`	A small mono label above the message
`.luz-toast__msg`	The message
`.luz-toast__close`	The × button, 28 px at least

How it works

A styled block from components/toast.css. LUZ has no toast script.

Position it with your own CSS, for example fixed at the bottom of the screen, above the page with --luz-z-toast.
If it hides by itself, leave it on screen for at least 5 seconds and keep it while it has focus or the pointer is over it.
The close button needs your script to remove the toast.

Without JavaScript

A toast only appears in answer to something your script did, so it does not exist without JavaScript. Show the same result on the page, for example in an alert after a form is sent.

Keyboard and ARIA

Showing a toast does not move focus.

Insert it into a polite live region (role="status") that is already on the page, so screen readers announce it.
The close button is reachable with Tab, and named "Dismiss notification".

Contrast and focus are in the Design tab.

Design

When to use

Use a toast to confirm a small result that needs no answer: "Draft saved", "Link copied".

When not to use

Do not use a toast for anything the reader must act on or must not miss: it goes away.

For an error, use an alert next to what failed.
For a decision, use a modal.
Do not put links or buttons in it, other than the close button.

Do and don't

Do A short confirmation the reader can miss without harm: “File exported.”

Don't A failed payment in a toast: it goes away before the reader acts. Use an alert next to what failed.

Writing the content

One short line, in the past tense: "File exported."

The kind label is one word: "Saved", "Success".
Do not repeat what the page already shows.

Contrast and focus

The toast is the strong surface with primary text, so it stands out from the page in every mode.

Part	Colour on background	Light	Dark	High contrast	Needs
Kind label	`--luz-text-secondary` on `--luz-surface-strong`	5.3:1	5.4:1	16.5:1	4.5:1
Message	`--luz-text-primary` on `--luz-surface-strong`	13.5:1	10.9:1	18.0:1	4.5:1
Close button	`--luz-text-secondary` on `--luz-surface-strong`	5.3:1	5.4:1	16.5:1	4.5:1
Focus ring	`--luz-focus-ring` on `--luz-surface-strong`	4.8:1	5.6:1	18.0:1	3:1

Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.

Focus: the toast does not take it when it appears. The close button has a 2 px --luz-focus-ring outline, 2 px outside.
Not colour alone: the kind is a word (“Success”), not a colour.
Target: the close button is at least 28 px square.

Tokens it uses

The 18 tokens that components/toast.css reads, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.

Color: --luz-divider, --luz-focus-ring, --luz-surface-strong, --luz-text-primary, --luz-text-secondary
Spacing and sizing: --luz-control-sm, --luz-space-3xs, --luz-space-md, --luz-space-sm, --luz-space-xs
Typography: --luz-font-mono, --luz-text-lg, --luz-text-sm, --luz-text-xs
Radius: --luz-radius-md, --luz-radius-sm
Shadows: --luz-shadow-md
Motion: --luz-duration-base

Keyboard and ARIA are in the Code tab.