Toast

Beacon's transient notification look. In the live app a global host renders these in the top layer with stacking and auto-dismiss; the visual — a light tinted card with a tone icon, message, and optional dismiss — is the inherited Ecology esa-alert-box wearing the Beacon skin. (Maps to Beacon's ui-toast; the dark Material esa-snackbar is a different pattern.)

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

Contexts

One tone per status. Each carries its own tint, border, and icon — the same contexts Beacon's toast exposes (its neutral primary maps to info).

Saved

Saved successfully.

Error

Something went wrong. Please try again.

Heads up

Review this before continuing.

Working

Your export is being prepared.

<AlertBox variant="success" title="Saved">Saved successfully.</AlertBox>
<AlertBox variant="danger" title="Error">Something went wrong. Please try again.</AlertBox>
<AlertBox variant="warning" title="Heads up">Review this before continuing.</AlertBox>
<AlertBox variant="info" title="Working">Your export is being prepared.</AlertBox>

States

The title is optional — omit it for a compact single-line notice. With dismissable, a × appears and a dismissed event bubbles on click (Beacon's dismissable = false relies on the auto-dismiss timer instead).

A general, neutral notice.

Dismissable

Click the × to hide this.

<AlertBox variant="info">A general, neutral notice.</AlertBox>
<AlertBox variant="success" title="Dismissable" dismissable={true}>Click the × to hide this.</AlertBox>

API

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Tone — drives the tint, border, and auto-mapped icon. Maps to Beacon toast contexts (info ≈ primary/info, success, warning, danger).
`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).

Tokens

--color-info / --color-success / --color-warning / --color-danger + their -subtle and -border variants — re-pointed to Beacon's palette by the theme
--color-text-primary (title) · --color-text-secondary (message) · --color-text-muted (dismiss)
--radius-200 · --spacing-* · --type-size-150