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.
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).
Colours
4 colours
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.
A single-line callout with no title.
Skip the title attribute when one line is enough.
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. |
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).