Feedback

Toast

Non-modal notifications that auto-dismiss.

stableEnhancer: enhanceToasthydrateless/toast.css

Non-modal notifications that appear temporarily and auto-dismiss. The region uses an ARIA live region so screen readers announce new messages.

Toast

Declarative triggers push messages into a live region. Toggle JS off to disable them.

Live

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(container, options?);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
duration	number	5000	Auto-dismiss delay in ms; `0` disables it.
variant	'info' | 'success' | 'warning' | 'danger'	—	Color of the toast passed to `show()`.

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-shadow-lg	Toast elevation.
--hl-radius-md	Corner radius.

Accessibility

• The region is role="status" with aria-live="polite", so new toasts are announced without stealing focus.
• Dismiss buttons include aria-label="Dismiss".

Related

AlertA short, prominent message with an intent color.ModalA dialog overlay built on the native <dialog> element.