Holo Alert
The <holo-alert> component is a static inline banner used to surface important information. The
accessible role is chosen automatically based on variant: warning/danger use role="alert"
(assertive), while info/success use role="status" (polite).
Live Previews
Section titled “Live Previews”Variants
Section titled “Variants”A new version is available.
Your changes have been saved.
This action may have side effects.
Something went wrong.
<holo-alert variant="info" heading="Heads up">A new version is available.</holo-alert><holo-alert variant="success" heading="Success">Your changes have been saved.</holo-alert><holo-alert variant="warning" heading="Warning">This action may have side effects.</holo-alert><holo-alert variant="danger" heading="Error">Something went wrong.</holo-alert>Dismissible
Section titled “Dismissible”Click the close button to dismiss.
<holo-alert variant="info" dismissible>Click the close button to dismiss.</holo-alert>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
| variant | variant | The severity/style of the alert. Determines the accessible role (assertive vs. polite). | 'info' \| 'success' \| 'warning' \| 'danger' | 'info' |
| heading | heading | Optional heading rendered above the alert body content. | string | undefined |
| dismissible | dismissible | If true, renders a dismiss button that hides the alert and emits holoDismiss when activated. | boolean | false |
Events
Section titled “Events”| Event | Description | Type |
| ------------- | ------------------------------------------- | ------------------- |
| holoDismiss | Emitted when the dismiss button is clicked. | CustomEvent<void> |
| Slot | Description | | --------- | ----------------------- | | (default) | The alert body content. |