---
name: alert
category: feedback
summary: "Inline callout with variants and optional dismiss"
subpath: "@42/core/alert"
---

Inline callout with `info|success|warning|error` variants and optional dismiss.
Sets ARIA live semantics automatically (`error`/`warning` → assertive, others →
polite).

```html
<div data-c42-alert data-variant="warning">
  <span data-c42-alert-icon aria-hidden="true">⚠</span>
  <div data-c42-alert-content>
    <strong data-c42-alert-title>Heads up</strong>
    <p data-c42-alert-description>Your trial ends soon.</p>
  </div>
  <button data-c42-alert-dismiss aria-label="Dismiss">×</button>
</div>
```

```ts
import { Alert } from '@42/core/alert';
const a = new Alert(root, { variant: 'warning' });
a.dismiss();
```

Options: `variant` ('info'|'success'|'warning'|'error'), `role` ('alert'|'status' override)
Methods: `setVariant(v)`, `dismiss()`, `show()`
Events: `alert:dismiss` → `{ variant }`