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.
Canonical
<koala-alert color="Info" title="Closed reason">
The client withdrew before exchange. Quote archived 14 May 2026.
</koala-alert>
Default colour is Info; default icon for each colour is picked automatically
(Info / Check / AlertTriangle / AlertCircle).
Variants
4 variantsBody-only
Custom icon
Override the default icon via the icon attribute. Any
IconName works.
With action
<koala-alert color="Warning" title="Your email isn't fully set up yet"
action-href="@settingsUrl" action-text="Go to email settings">
Finish DNS verification and the mailbox check so your outbound emails start reaching customers' inboxes.
</koala-alert>
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
<koala-alert color="Info" title="New feature: bulk quote actions"
dismiss-key="bulk-actions:org:@org.Id">
Select multiple quotes from the list view to archive, reassign, or export them in one go.
</koala-alert>
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. |
| dismiss-action | Alpine expr | Transient dismiss for an alert whose visibility the surrounding Alpine scope owns — the expression becomes the close button's x-on:click (e.g. testResult = null). No sessionStorage; wrap the alert in the owning x-show. Ignored when dismiss-key is set. |
| class | Tailwind classes | Merged with the alert's base classes. Use for spacing (mt-4) etc. |
Do & don't
<koala-notification> for those (auto-dismissing toast).