Toast · Toast - status

Toast — the house snackbar: one line that confirms what just happened and leaves.

Beta · Feedback and status · packages/css/src/components/toast.css

.pui-toast (the house snackbar; __action, a Kbd) and .pui-toast-status (Alert’s outline box floating; tones, __action __close); .pui-toast-region places them (fixed, bottom-centre; --bottom-right). Shown here static.

Toast · Toast - status — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Message; Has action + Action (one verb — Undo, View, Retry); Has kbd + the exposed Kbd (the shortcut that did it, or undoes it)
• No tone: a snackbar is neutral by design — a result with a tone is Toast - status
• One line; if it needs a second, it is Toast - status or an Alert
• Bottom-centre, one at a time; the next replaces the last

Use when an action the user just took needs a word of confirmation and maybe a way back — duplicated, copied, saved, deleted with Undo — on an editor or a product screen.

Do not use when the message carries a status (Toast - status); it must stay (Alert); it needs an answer (Alert dialog); it is longer than a line.

Relates to Toast - status, Kbd, Alert, Alert dialog, Button - ghost.

Anti-patterns two actions · a yellow action · a snackbar that stays · a tone on it · a snackbar at the top · a fill changed on the instance.

Keywords: toast, snackbar, confirmation, undo, shortcut, editor

Figma — page Toast: Toast (1 variants) · Toast - status (5 variants)

shadcn: toast

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens toast.css.

<div class="pui-toast-region"><div class="pui-toast" role="status">Slide duplicated
  <button class="pui-toast__action">Undo</button><kbd class="pui-kbd pui-kbd--on-inverse">⌘Z</kbd></div></div>
<div class="pui-toast-region pui-toast-region--bottom-right">
  <div class="pui-toast-status pui-toast-status--danger" role="alert"> …alert's parts, __action, __close… </div></div>

The modifiers

	What it is	Note
Region	.pui-toast-region — fixed, bottom-centre, 24 up; --bottom-right for the status stack	—

Rules — one line, one verb; how long it stays is the code side’s, never drawn.

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #ffffff	8.24	4.5	text.muted on surface.page (promised)	ok
#ffffff on #463f3f	10.27	4.5	Nav item when active (promised)	ok
#ffffff on #231b1b	16.88	4.5	text.on-accent on surface.inverse (not-offered)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

4 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

primitive	on	the indicator	over	the change
Toast action	surface/inverse	shadow #6a66e4 2 px	#231b1b	3.72	ok

6 of 6 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).