---
title: "JavaScript Alert"
description: "The LemonadeJS Alert block for JavaScript: Inline alert banners. Contract-verified, framework-agnostic, zero dependencies, with a live example."
source: https://lemonadejs.com/docs/plugins/alert/
---

<link rel="stylesheet" href="/v6/alert.css">

# JavaScript Alert

`@lemonadejs/alert` · ✓ 15 contract checks · framework-agnostic · zero dependencies

`<Alert />` — a severity banner on the v6 contract model.

Four severities (info — the default — success, warning, error) drive
the icon and the palette through data-severity; three flavors
(standard — the default — outlined, filled) through data-variant.
Icons are inline SVG: no external icon font dependency.

Visibility is the bound state (default visible): the × button hides
the alert via .set — which fires onclose — while external writes to
the bound state stay silent. The whole alert is a branch on that
state: hidden means not in the DOM.

Body content: title (bold AlertTitle line), message (plain text) and
props.children, rendered in that order.

## Example

<!--example-->

```js
import { html } from 'lemonadejs';
import Alert from '@lemonadejs/alert';

const App = (props, { state }) => {
    const visible = state(true);

    return html`<div style="display:grid;gap:10px">
        <${Alert} severity="success" closable bind="${visible}"
            title="Order confirmed" message="Order #4821 ships tomorrow. Close me, then bring me back." />
        <${Alert} severity="warning" variant="outlined"
            message="Your trial ends in 3 days." />
        <${Alert} severity="error" variant="filled"
            title="Payment failed" message="The card ending in 4242 was declined." />
        <p style="margin:0">
            Success alert visible: <b>${() => String(visible.value)}</b>
            <button style="margin-left:8px" onclick="${() => (visible.value = true)}">Show again</button>
        </p>
    </div>`;
};
```

## Installation

```bash
npm install @lemonadejs/alert
```

```js
import Alert from '@lemonadejs/alert';
import '@lemonadejs/alert/style.css';
```

Three deployment forms, one component:

```js
html`<${Alert} />`                       // by value (no registration)
setComponents({ Alert });               // then <Alert /> by name anywhere
createWebComponent(Alert);              // <lm-alert> in plain HTML/any framework
```

## Props

Every declared prop arrives as a **live state** — pass a value for a snapshot or a
state for a two-way live wire. Attribute strings are coerced to the declared type.

| Prop | Type | Default | Description |
|---|---|---|---|
| `bind` | boolean | — | Two-way bound value. `.set()` fires `onchange`; plain assignment is silent. visibility two-way (default: visible) |
| `severity` | string | `''` | '' = info | success | warning | error |
| `variant` | string | `''` | '' = standard | outlined | filled |
| `title` | string | `''` | optional bold title line |
| `message` | string | `''` | body text (children render after it) |
| `closable` | boolean | `false` | shows the × button |
| `icon` | boolean | `true` | false hides the severity icon |

## Events

All event names are lowercase (the platform convention — LJS-305 warns otherwise).

- `onclose` — fires when the × hides the alert

## Styling

All classes follow the `lm-alert-*` convention; visual variants are `data-*`
attributes on the root. Override freely — there is no styling engine to fight.

## Contract

The machine-readable schema ships with the package:

```js
import contract from '@lemonadejs/alert/contract.json';
```

`verify.json` carries the conformance proof produced by `verify(Alert)`.

Looking for the v5 plugin? See the [archived v5 documentation](/docs/v5/plugins/).