Alert Box

Inline status message with a variant-mapped icon, optional title, and optional dismiss control.

Inherited .astro import EsaAlertBox from '@esa/ecology/esa-alert-box.astro';

Preview

Heads up

This is an informational message.

<AlertBox variant="info" title="Heads up">
  This is an informational message.
</AlertBox>

Variants

Heads up

This is an informational message.

Saved

Your changes were saved successfully.

Check this

Some fields need your attention.

Error

Something went wrong while saving.

<AlertBox variant="info" title="Heads up">This is an informational message.</AlertBox>
<AlertBox variant="success" title="Saved">Your changes were saved successfully.</AlertBox>
<AlertBox variant="warning" title="Check this">Some fields need your attention.</AlertBox>
<AlertBox variant="danger" title="Error">Something went wrong while saving.</AlertBox>

States

The title is optional — omit it for a compact single-line alert. With dismissable, a close button appears and a dismissed event bubbles on click.

A compact, single-line alert with just a message.

Dismiss me

Click the × to hide this alert.

<AlertBox variant="info">A compact, single-line alert with just a message.</AlertBox>
<AlertBox variant="warning" title="Dismiss me" dismissable={true}>Click the × to hide this alert.</AlertBox>

API

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Tone — drives the background, border, and auto-mapped icon.
`title`	`string`	—	Optional bold heading above the message.
`dismissable`	`boolean`	`false`	Shows a close button that hides the alert and emits a dismissed event.

Events

Event	Type	Default	Description
`dismissed`	`CustomEvent`	—	Bubbles when the close button is clicked (dismissable only).

Alert Box

Preview

Variants

States

API

Events

Accessibility