Feedback

`<kern-toast>`

Short, non-blocking feedback after an action („Snapshot gespeichert“). Usually created with toast(), which stacks them at the bottom right. Closes itself after duration (paused while hovered or focused), with the × or the optional action. toast() announces it through a polite live region; danger interrupts as an alert.

Examples

Showing a toast

Usually you call toast(), imported from '@yfridelance/kern'. It stacks toasts at the bottom right (at most four), announces them through a polite live region and resolves with the reason the toast closed: 'timeout', 'close' or 'action'. A plain string works as the message.

Save snapshot

Plain message

<div style="display:flex;flex-wrap:wrap;gap:12px"> <kern-button class="ok">Save snapshot</kern-button> <kern-button class="info">Plain message</kern-button> </div>

const { toast } = await import('../kern/index.esm.js'); root.querySelector('.ok').addEventListener('click', () => toast({ message: 'Snapshot of «Bad Lüftung» saved.', tone: 'ok' })); root.querySelector('.info').addEventListener('click', () => toast('Scan of 192.168.1.0/24 started.'));

Undo action and persistent errors

actionLabel adds a button; the promise then resolves with 'action' when it is clicked. duration is in milliseconds (default 5000, paused while hovered or focused); 0 keeps the toast until the user closes it, which suits errors. danger interrupts as an alert. All toasts share one live region; setToastRegionLabel('Notifications') sets its accessible name (default „Benachrichtigungen“).

Remove 3 devices

Restart Küche Licht

<div style="display:flex;flex-wrap:wrap;gap:12px"> <kern-button class="undo">Remove 3 devices</kern-button> <kern-button class="err" variant="danger">Restart Küche Licht</kern-button> </div> <p class="out" style="font-size:13px;color:var(--text-muted)"></p>

const { toast } = await import('../kern/index.esm.js'); root.querySelector('.undo').addEventListener('click', async () => { const reason = await toast({ message: '3 devices removed from «Garage».', actionLabel: 'Undo', duration: 8000 }); root.querySelector('.out').textContent = `toast → ${reason}`; }); root.querySelector('.err').addEventListener('click', () => toast({ heading: 'Restart failed', message: 'Küche Licht does not respond (timeout).', tone: 'danger', duration: 0, closeLabel: 'Close' }));

The element itself

kern-toast can also be placed directly, e.g. in a custom container. It closes itself after duration, with × (close-label) or the action, emitting kernAction and kernClose with the reason. Here duration="0" keeps them on the page.

Snapshot of «Bad Lüftung» saved.

Firmware 1.4.4 for 3 devices.

<div style="display:grid;gap:8px;max-width:380px"> <kern-toast tone="ok" duration="0">Snapshot of «Bad Lüftung» saved.</kern-toast> <kern-toast tone="warn" heading="Update available" action-label="Install" duration="0">Firmware 1.4.4 for 3 devices.</kern-toast> </div> <p class="out" style="font-size:13px;color:var(--text-muted)"></p>

for (const t of root.querySelectorAll('kern-toast')) { t.addEventListener('kernClose', (e) => (root.querySelector('.out').textContent = `kernClose → ${e.detail.reason}`)); }

Properties

actionLabelattribute action-label

string | undefined

Text of an optional action, e.g. „Rückgängig“.

closeLabelattribute close-label · default Close · de Schliessen

string | undefined

durationdefault 5000

number

Milliseconds until it closes itself; 0 keeps it until closed.

heading

string | undefined

tone

reflects

default 'neutral'

"danger" | "info" | "neutral" | "ok" | "warn"

Events

kernAction

CustomEvent<void>

The action was clicked (the toast then closes).

kernClose

CustomEvent<{ reason: KernToastReason; }>

The toast closed; reason says why.

Methods

close()

close(reason?: KernToastReason) => Promise<void>

Closes the toast.

Slots

(default)

Message text

CSS parts

action

The action button