Components Alerts

Alerts

Inline, persistent banners for state callouts ("Closed reason", "Out-of-date version", "Awaiting client"). The non-toast counterpart to <koala-notification> — alerts sit inside the page and stay visible until the underlying state changes.

<koala-alert>

Canonical

Closed reason

The client withdrew before exchange. Quote archived 14 May 2026.

Default colour is Info; default icon for each colour is picked automatically (Info / Check / AlertTriangle / AlertCircle).

Variants

4 variants

Heads up

Information that's worth knowing but doesn't require action.

Saved

Your changes have been recorded.

Out-of-date version

You're viewing version 2; the latest is version 3.

Action required

We couldn't reach Hoowla — sync paused until the connection is restored.

Body-only

A single-line callout with no title.

Skip the title attribute when one line is enough.

Custom icon

Email sent

A copy of this quote was emailed to the client at the address on file.

Milestone reached

10 quotes sent this week.

Override the default icon via the icon attribute. Any IconName works.

With action

Your email isn't fully set up yet

Finish DNS verification and the mailbox check so your outbound emails start reaching customers' inboxes.

Go to email settings

Action required

We couldn't reach Hoowla — sync paused until the connection is restored.

Reconnect

Set action-href and action-text together to render a trailing button. The button is a status-coloured ghost — transparent fill, border and label in the alert's on-<status>-container token, with an outline-fill hover. The alert's status colour is already doing the visual work; a filled button would fight the alert chrome for attention. On mobile the button stacks below the body and goes full-width; on sm+ it sits to the right, vertically centred against the icon + body block. The link uses Alpine-AJAX (x-target.push="main") so in-portal navigation stays SPA-style. Use sparingly — one fix-it action per alert, only when the alert persists until the user does something about it.

Dismissable

Your email isn't fully set up yet

Finish DNS verification and the mailbox check so your outbound emails start reaching customers' inboxes.

Go to email settings

New feature: bulk quote actions

Select multiple quotes from the list view to archive, reassign, or export them in one go.

Set dismiss-key to render a close button and persist dismissal in sessionStorage under that key. Dismissal survives Alpine-AJAX page swaps but resets on a new browser tab, so a still-broken state can re-nag the user next session. Scope the key (e.g. email-setup:org:{orgId}) so switching context shows the relevant banner again. Omit the attribute for alerts that should stay visible until the underlying state changes (closed-reason callouts, out-of-date version notices).

Props

7 attributes

Attribute	Values	Notes
color	Info, Success, Warning, Danger	Default `Info`. Drives both the surface colour and the implicit role (alert for Warning/Danger, status for Info/Success).
title	String	Optional bold first line. Omit for body-only callouts.
icon	IconName enum	Override the colour's default icon.
action-href	URL	Optional CTA destination. Renders a trailing primary button when paired with `action-text`.
action-text	String	Label for the trailing button. Required alongside `action-href`. Renders as a status-coloured ghost button (transparent fill, `on-<status>-container` text + outline, hover fills the outline).
dismiss-key	String	When set, the alert is dismissable. Used as the `sessionStorage` key — scope it (e.g. include an org/user id) so dismissal is bound to the relevant context.
class	Tailwind classes	Merged with the alert's base classes. Use for spacing (`mt-4`) etc.

Do & don't

Closed reason

The client withdrew before exchange.

Do Use alerts for persistent state callouts that explain page-level context.

Saved.

Don't Don't use alerts for transient confirmations after an action — use <koala-notification> for those (auto-dismissing toast).