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.

Props

4 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.
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).