Feedback
Toast
Non-modal notifications that auto-dismiss.
Non-modal notifications that appear temporarily and auto-dismiss. The region is an ARIA live region so screen readers announce new messages; danger toasts get role="alert" so they interrupt. Declarative data-hl-toast-trigger buttons are handled through event delegation, so triggers added after enhancement just work. Hovering or focusing a toast pauses its timer.
Toast
Declarative triggers push messages into a live region. data-hl-toast-intent colors the toast and data-hl-toast-duration overrides the timeout. Toggle JS off to disable them.
JavaScript
This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:
import { enhanceToast } from '@hydrateless/enhancers/toast';
const handle = enhanceToast(document);
// handle.api -> imperative controls
// handle.destroy() -> tear everything downProps
The framework bindings expose these props (and forward the rest to the root element).
| Prop | Type | Default | Description |
|---|---|---|---|
duration | number | 5000 | Default auto-dismiss delay in ms, set on `enhanceToast` or `ToastRegion`; `0` keeps toasts until dismissed. Per-toast `show()` options override it. |
intent | 'info' | 'success' | 'warning' | 'danger' | Not set | Passed to `show(message, { intent })`. Sets `data-hl-intent` on the toast; `danger` also sets `role="alert"`. |
onOpenChange | (open: boolean, toast: HTMLElement) => void | Not set | Called after a toast appears or is dismissed. |
dismissAll | () => void | Not set | On the returned API (and `useToast`): dismiss every toast in the region at once. |
Events and callbacks
| Event / Callback | Payload | Description |
|---|---|---|
hl:open-change | { open: boolean, toast: HTMLElement } | Fires when a toast appears or is dismissed (also the `onOpenChange` callback). |
CSS variables
Override these on any ancestor to theme the component. See the theme studio to preview changes live.
| CSS variable | Used for |
|---|---|
--hl-surface | Toast background. |
--hl-overlay-shadow | Toast elevation. |
--hl-radius-lg | Corner radius. |
--hl-success | Accent stripe for each intent (`--hl-warning`, `--hl-danger`, `--hl-info`). |
Accessibility
- The region is
role="status"witharia-live="polite", so new toasts are announced without stealing focus;dangertoasts arerole="alert". - Auto-dismiss pauses while the pointer or keyboard focus is on the toast (WCAG 2.2.1), so the dismiss button can be reached.
- Dismiss buttons include
aria-label="Dismiss".