# Toast

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

Kit part · Free · https://tactileui.dev/parts/toast

- Element: `toast()`
- Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Toasts
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Green · done

```html
<div class="tui-toast" style="animation:none"><span class="tui-lamp" data-on></span>Preset saved to Studio A.</div>
```

### Amber · heads-up

```html
<div class="tui-toast" style="animation:none"><span class="tui-lamp" data-lamp="amber" data-on></span>Disk 82% full.</div>
```

## Every state

- Green
- Amber
- Red

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## 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

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

```js
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 });
```

The demo on the page:

```html
<div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center"><button class="tui-key" data-toast="Preset saved to Studio A."><span class="tui-lamp" data-on></span>Save preset</button><button class="tui-key" data-toast="Disk 82% full: archive old takes." data-lamp="amber"><span class="tui-lamp" data-lamp="amber" data-on></span>Check the disk</button><button class="tui-key" data-toast="Recording to reel 4." data-lamp="red"><span class="tui-lamp" data-lamp="red" data-on></span>Record</button></div>
```

## Usage notes

Press a key: the plate rises bottom right and leaves by itself.

## Accessibility

- 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

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

The full rules are in `dialog.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Dialog](https://tactileui.dev/parts/dialog): A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.