Alert <l-alert>

Alerts display a contextual message inline, drawing attention with a semantic color and a leading icon. Commonly used for form feedback, status banners, and inline warnings.

HTML

<l-alert variant="info">Your changes have been saved.</l-alert>

HTML tag<l-alert>

⏣Native

⬡Progressive

◇Plain

⬢Shadow-DOM

Plain Custom Element

Options

Variants

Add variant="info", variant="success", variant="warning", or variant="danger". Each picks a default icon and tints the callout. Default is neutral.

A new software update is available. Your profile has been updated. Your trial ends in 3 days. We couldn't process your payment.

Code

HTML

<div class="flex flex-col gap-3">
  <l-alert variant="info">A new software update is available.</l-alert>
  <l-alert variant="success">Your profile has been updated.</l-alert>
  <l-alert variant="warning">Your trial ends in 3 days.</l-alert>
  <l-alert variant="danger">We couldn't process your payment.</l-alert>
</div>

Title

Add a .l-alert-title element above the body content for a bold heading.

Payment successful Your order #1234 has been confirmed and will ship within two business days.

Code

HTML

<l-alert variant="success">
  <span class="l-alert-title">Payment successful</span>
  Your order #1234 has been confirmed and will ship within two business days.
</l-alert>

Icon

Override the variant's default icon with icon="set:name" (Iconify format), or hide it with without-icon.

Notifications are now enabled. This message has no icon.

Code

HTML

<div class="flex flex-col gap-3">
  <l-alert
    variant="info"
    icon="lucide:bell"
    >Notifications are now enabled.</l-alert
  >
  <l-alert
    variant="warning"
    without-icon
    >This message has no icon.</l-alert
  >
</div>

Dismissible

Add the dismissible attribute to show a close button. Clicking it emits a cancelable hide event, then removes the alert.

Unsaved changes You have unsaved changes that will be lost if you leave this page.

Code

HTML

<l-alert
  variant="warning"
  dismissible
>
  <span class="l-alert-title">Unsaved changes</span>
  You have unsaved changes that will be lost if you leave this page.
</l-alert>

Examples

Title with body and action

Your subscription has expired Renew now to keep access to your projects and team workspaces. Renew subscription

Code

HTML

<l-alert variant="danger">
  <span class="l-alert-title">Your subscription has expired</span>
  Renew now to keep access to your projects and team workspaces.
  <a
    href="#"
    class="mt-1 font-medium underline w-fit"
    >Renew subscription</a
  >
</l-alert>

Accessibility

Criteria

Live region

A static alert in the markup is read in normal reading order. For an alert injected dynamically, add role="alert" (assertive) or role="status" (polite) so screen readers announce it

WCAG4.1.3

RGAA7.5

Not color alone

Meaning is carried by the icon and text, not color alone

WCAG1.4.1

RGAA3.1

Color contrast

Text meets the minimum contrast ratio against the tinted background across all variants

WCAG1.4.3

RGAA3.2

Decorative icon

The leading icon is hidden with aria-hidden="true"

WCAG1.1.1

RGAA1.1

Close button name

The dismiss button has a localized aria-label (Close)

WCAG4.1.2

RGAA7.1

Keyboard interactions

Tab

Moves focus to the close button (when `dismissible`)

Enter / Space

Dismisses the alert when the close button is focused

API reference

Importing

JS

import 'luxen-ui/alert';

CSS

@import 'luxen-ui/css/alert';
/* Only needed when using `dismissible` */
@import 'luxen-ui/css/close-button/ring';

Attributes & Properties

variantAlertVariant | undefinedProperty

Semantic variant: info, success, warning, or danger. Default is neutral.

iconstring | undefinedProperty

Iconify icon name (e.g. lucide:bell) overriding the variant's default icon.

without-iconbooleandefault:falseProperty

Hide the leading icon entirely.

dismissiblebooleandefault:falseProperty

Show a close button that dismisses the alert when clicked.

Events

hidecancelableEvent

Emitted when a dismissible alert is about to close. Cancelable — call event.preventDefault() to keep it open.

after-hideEvent

Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.

CSS classes

.l-alert-iconClass

The leading icon, colored by variant (auto-injected).

.l-alert-contentClass

Wrapper the authored children are moved into; stacks them vertically (auto-injected).

.l-alert-titleClass

Optional bold heading placed above the body content. Use a real heading element (e.g. <h3 class="l-alert-title">) when the alert is a section callout so it is reachable by heading navigation.

CSS custom properties

--gapdefault:0.75remCustom property

Gap between the icon, content, and close button.

--paddingdefault:1remCustom property

Inner padding.

--border-radiusdefault:8pxCustom property

Corner radius.