---
outline: deep
---

# 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>
```

**`<l-alert>`** — Custom Element (no Shadow DOM)

## Options

### Variants

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

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

```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](https://icon-sets.iconify.design/) format), or hide it with `without-icon`.

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

```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

```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
- **Not color alone** — Meaning is carried by the icon and text, not color alone
- **Color contrast** — Text meets the minimum contrast ratio against the tinted background across all variants
- **Decorative icon** — The leading icon is hidden with `aria-hidden="true"`
- **Close button name** — The dismiss button has a localized `aria-label` (`Close`)

### Rules

- Do not rely on variant color alone — always include a text label
- Add `role="alert"` when the alert is inserted in response to a user action, so it is announced
- Use `variant="danger"` for errors and `variant="warning"` for cautionary messages
- Use a heading element for the title (e.g. `<h3 class="l-alert-title">`) when the alert is a section callout, so it is reachable by heading navigation

### 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

- **variant**: `AlertVariant | undefined` — Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.
- **icon**: `string | undefined` — Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.
- **without-icon**: `boolean` (default: `false`) — Hide the leading icon entirely.
- **dismissible**: `boolean` (default: `false`) — Show a close button that dismisses the alert when clicked.

### Events

- **hide** (cancelable) — Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.
- **after-hide** — Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.

### CSS classes

- `.l-alert-icon` — The leading icon, colored by variant (auto-injected).
- `.l-alert-content` — Wrapper the authored children are moved into; stacks them vertically (auto-injected).
- `.l-alert-title` — 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

- `--gap` (default: `0.75rem`) — Gap between the icon, content, and close button.
- `--padding` (default: `1rem`) — Inner padding.
- `--border-radius` (default: `8px`) — Corner radius.