> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/alpine/notification.md).

# x-notification

A directive and magic that turn a popover panel into a self-dismissing notification with hover and focus aware timing.

A directive and magic that turn a popover panel into a self-dismissing notification.

| Directive / magic                | What it does                                                                                                                                    |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `x-notification`                 | The root. Binds `role="alert"` plus `x-popover` and `x-popover:panel.nofloat` on the same element, so the notification is its own popover panel |
| `x-notification.duration.8000ms` | Sets how long the notification stays open before it dismisses itself (default 5000ms)                                                           |
| `$notification`                  | The state, readable anywhere inside the root: `visible`, `dismiss()`, `startTimer()`, `cancelTimer()`                                           |

The element gets `role="alert"`, so screen readers announce its content. The dismiss timer starts when the panel expands. Hover or keyboard focus inside the panel pauses the timer; leaving starts it again. `dismiss()` collapses the panel and returns focus to the previously focused element. Focus doesn't move when a popup is open.

## Examples

### A basic notification

Use `$popover.open()` to show the notification and `$notification.dismiss()` to close it:

```html
<div
  x-notification
  x-init="$nextTick(() => $popover.open())"
>
  <p>Added to cart</p>
  <button @click="$notification.dismiss()">Close</button>
</div>
```

`x-notification` makes the element a popover panel, so `x-transition` classes animate it in and out the same as any other panel.

### Setting how long it stays

Use the `duration` modifier to change the self-dismiss delay:

```html
<div x-notification.duration.8000ms>…</div>
```

The add-to-cart notification uses 5000ms. Hover and focus hold the timer, so a shopper reading the panel keeps it open without any extra code.

### Dismissing from outside events

Use `$notification.dismiss()` in window and outside-click listeners to close the notification when something else takes over the screen:

```html
<div
  x-notification.duration.5000ms
  @click.outside="$notification.dismiss()"
  @keydown.escape.prevent.stop.window="$notification.dismiss()"
  x-effect="$store?.drawer?.isOpen && $notification.dismiss()"
>
  …
</div>
```

The add-to-cart notification dismisses on escape, on a click outside, and whenever the cart drawer opens, since the drawer replaces it as the cart surface.

## Customizing

The add-to-cart notification is the `api-add-to-cart-notification` section. The "After add to cart" setting controls whether it appears. See [Cart & conversion](/features/cart.md).