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

live

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

npm install @lemonadejs/alert

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

Three deployment forms, one component:

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
`variant`	string	`''`	” = standard
`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:

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.