Kit part · Toasts

Toast

A confirmation after an action: a small plate with a lamp and one factual sentence, read out politely, gone in 3.6 seconds.

Element: toast()
Needs: kit.css + kit.mjs
Rules: dialog.rules.md · 3
Finishes: Aluminium · Graphite · Porcelain · Black
Volumes: Tactile · Quiet

On this page

Variants
Every state, at once
API
Markup
Accessibility
How it’s built
Rules
Related parts

Variants

Preset saved to Studio A.

Green · done

Disk 82% full.

Amber · heads-up

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

Part	Green	Amber	Red
Toast	Preset saved.	Disk 82% full.	Recording.

Graphite

Part	Green	Amber	Red
Toast	Preset saved.	Disk 82% full.	Recording.

API

Name	Kind	Values	What it does
toast(text, options)	function	kit.mjs	Shows a plate and returns it.
options.lamp	option	"green" · "amber" · "red" · "blue" · "white"	The lamp. Green by default.
options.ms	option	3600	How long it stays before it leaves.
.tui-toasts	class	created once	The stack, bottom right, role="status", aria-live="polite".
.tui-toast · .is-leaving	class	—	The plate, and its 200ms exit.

Markup

<button class="tui-key" id="save">Save preset</button>

import { toast } from '/kit/kit.mjs';

document.getElementById('save').addEventListener('click', () => {
  toast('Preset saved to Studio A.');
});
toast('Disk 82% full: archive old takes.', { lamp: 'amber' });
toast('Recording to reel 4.', { lamp: 'red', ms: 5000 });

Needs kit.css and kit.mjs. How to install the kit.

Toasts go into one role="status" region with aria-live="polite", so they are read after the current sentence.
They leave on their own: never put a decision or an error that needs action in one. Use a dialog, or a hint on the field.

How it’s built

Twenty lines in kit.mjs. The first call creates the live region; each call appends a plate with a lamp and a text node (never HTML), then removes it after ms. It rises with the kit’s 220ms rise.

Rules

dialog.rules.mdIn the brain

One factual sentence with a lamp, and never a toast for an error that needs action.

3 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder Pass How agents use the brain

Confirm

Erase reel 3?

KeepErase