Feedback

Alert

A short, prominent message with an intent color.

stableCSS onlyEnhancer: enhanceAlerthydrateless/alert.css

A short, prominent message with an intent color and optional title. Use role="alert" so assistive technology announces it. The alert itself is CSS-only; add data-hl-alert and a data-hl-dismiss button and the optional enhancer makes it dismissible with an exit transition and an hl:open-change event.

Playground

Heads up

Your trial ends soon.

IntentTitleBody

Dismissible

A data-hl-dismiss button inside a data-hl-alert hides the alert. The enhancer waits for the CSS exit transition before setting hidden, so the alert fades out instead of vanishing.

Saved

Your changes are live.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceAlert } from '@hydrateless/enhancers/alert';

const handle = enhanceAlert(document);
// 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
`intent`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'neutral'`	Color and default icon.
`title`	`string`	Not set	Optional bold heading above the body.

Events and callbacks

Event / Callback	Payload	Description
`hl:open-change`	`{ open: boolean }`	Fires after an enhanced alert is dismissed or shown again (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-info`	Accent for the info intent (and the success/warning/danger equivalents).
`--hl-radius-md`	Corner radius.

JavaScript

Props

Events and callbacks

CSS variables

Accessibility

Related