Toast
stable 3.4 kB<hk-toast>Pushed from a service, rendered by one host you drop in once. The stack caps itself, pauses its timers while hovered or focused, and never traps a screen reader mid-announcement. Four tones, including an orange `warn` that sits between info and danger — for the case where something needs attention but nothing has failed yet, which a two-tone set has to misreport as one or the other.
#notification#snackbar
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| position | 'top-right' | 'bottom-right' | 'top-center' | … | 'bottom-right' | Host corner. |
| max | number | 3 | Stack cap — oldest drops out first. |
| tone | 'success' | 'info' | 'warn' | 'danger' | 'info' | Per-toast. `warn` is orange and sits between info and danger: something needs attention, but nothing has failed yet. |
| duration | number | 4200 | Milliseconds before auto-dismiss. 0 keeps it until dismissed. |
Methods
push(toast)(t: HkToast) => stringQueues a toast and returns its id.
dismiss(id)(id: string) => voidRemoves one toast early.
clear()() => voidEmpties the stack.
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-toast-gap | 10px | Space between stacked toasts. |
| --hk-toast-width | 360px | Toast width on wide screens. |
Accessibility
- Host is an aria-live region: polite for info, assertive for errors.
- Timers pause on hover and on keyboard focus so a toast cannot vanish mid-read.