Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesFeedbackAlert

Alert

Persistent inline banner for a state callout that stays until the underlying state changes.

<koala-alert>

Tone

tone="Info"
Heads up
Information that's worth knowing but doesn't require action.
tone="Success"
Saved
Your changes have been recorded.
tone="Warning"
tone="Danger"
joey="true" — Joey speaking, not a status
Joey's read (your firm only)
The seller's conveyancer has answered this one before, on 12 Oak Lane, and the answer was the same both times.

Content

Title + body
Closed reason
The client withdrew before exchange. Quote archived 14 May 2026.
Body only
icon="Mail"
Email sent
A copy of this quote was emailed to the client at the address on file.

Action

koala-alert-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
koala-alert-action, dismissible
Your emails could be landing in spam
Finish email setup so clients and agents get your messages in their inbox.
Finish setup

Dismissible

dismissible
New feature: bulk quote actions
Select multiple quotes from the list view to archive, reassign, or export them in one go.

Stack

koala-alert-stack
Your emails could be landing in spam
Finish email setup so clients and agents get your messages in their inbox.
Finish setup
Turn on message notifications
You'll notice new messages even when Portal isn't the tab you're looking at.
Keep Koala one tap away
Install it and Koala opens in its own window, straight from your dock or home screen.
label string (the region's name, default Alerts)
children one element per alert; an alert hidden by x-show leaves the rotation

Environment banner

DEMO ENVIRONMENT
label string
position StickyFixed

API

tone PrimarySuccessDangerWarningInfoNeutral
joey truefalse
icon IconName
title string
dismissible truefalse (emits koala:dismiss)
title-expression Alpine expression (a title that changes on the client)
koala-alert-action on one native a or button child; makes it an action alert: always the neutral surface whatever its tone, icon in a circle, action at the end of the row left of the dismiss cross
preserve-newlines bool (for runtime free text that carries its own line breaks)
class Tailwind classes
Open