Feedback
Alert
A short, prominent message with an intent color.
A short, prominent message with an intent color and optional title. Use role="alert" so assistive technology announces it. CSS-only.
Playground
Heads up
Your trial ends soon.
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 | — | Optional bold heading above the body. |
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. |
Accessibility
role="alert"makes screen readers announce the message immediately.- A leading
<svg>is automatically tinted to match the intent.