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).

When to use

Use it for:

Telling the user something happened or needs attention: a saved change, a failed request, a policy notice.
Persistent messages that stay in the page flow until the user dismisses them or the situation changes.

Don’t use it for:

Brief, auto-dismissing confirmations. Use Toast.
Short status labels on a row or card. Use Badge or Tag.
Interrupting the user to make a decision. Use Dialog.

Live Previews

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

Click the close button to dismiss.

<holo-alert variant="info" dismissible>Click the close button to dismiss.</holo-alert>

Accessibility

The host is a live region. info and success render role="status" with aria-live="polite". warning and danger render role="alert" with aria-live="assertive". The status icon is aria-hidden, so meaning never relies on colour alone: your message text carries it. The optional heading renders as a <p>, not a heading element.

When dismissible is set, the alert renders a native <button> named by dismissLabel (default “Dismiss”).

Key	Action
`Tab`	Moves focus to the dismiss button
`Enter`, `Space`	Activates the dismiss button, which fires `holoDismiss`

The component only emits holoDismiss. It does not remove itself, so you decide what happens to focus afterwards.
The dismiss button shows a visible focus ring with :focus-visible.

You provide:

Message text that is complete on its own. Live regions announce changes after they are in the page; an alert already present at page load may not be announced.
Focus management after dismissal, for example moving focus to a sensible nearby element when the alert is removed.
Restraint with warning and danger, because they interrupt screen-reader users.
A specific dismiss-label (for example “Dismiss upload warning”) when several dismissible alerts can be on the page, or a translated one for other languages.

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-alert';

Properties

Property	Attribute	Type	Default	Description
`dismissLabel`	`dismiss-label`	`string`	`'Dismiss'`	The accessible name of the dismiss button.
`dismissible`	`dismissible`	`boolean`	`false`	If true, renders a dismiss button that emits `holoDismiss` when activated. The alert does not remove itself; handle the event to hide or remove it.
`heading`	`heading`	`string`	—	Optional heading rendered above the alert body content.
`variant`	`variant`	`"danger" \| "info" \| "success" \| "warning"`	`'info'`	The severity/style of the alert. Also determines the accessible role: "warning"/"danger" use role="alert" (assertive), "info"/"success" use role="status" (polite).

Events

Event	Detail	Description
`holoDismiss`	`void`	Emitted when the dismiss button is clicked.

Slots

Slot	Description
(default)	The alert body content.

CSS custom properties

Property	Description
`--holo-alert-accent-color`	Color of the leading accent border and icon. Defaults to the status color of the current variant.
`--holo-alert-bg`	Background color. Overrides the per-variant status background.
`--holo-alert-border-color`	Border color of the alert.
`--holo-alert-content-color`	Text color of the slotted body content.
`--holo-alert-padding`	Inner padding of the alert.
`--holo-alert-radius`	Corner radius of the alert.
`--holo-alert-text-color`	Text color of the alert and its heading.