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"

Out-of-date version

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

tone="Danger"

Action required

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

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

Skip the title attribute when one line is enough.

icon="Mail"

Email sent

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

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

Dismissible

dismissible

New feature: bulk quote actions

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

Prominent

prominent, dismiss-label

Your emails could be landing in spam

Finish email setup so clients and agents get your messages in their inbox.

Finish setup

Environment banner

DEMO ENVIRONMENT

label string

position StickyFixed

API

tone PrimarySuccessDangerWarningInfoNeutral

joey truefalse

icon IconName

title string

dismissible truefalse (emits koala:dismiss)

prominent truefalse (icon in a circle, centred row)

dismiss-label string (a worded dismiss beside the action instead of the corner cross)

koala-alert-action on one native a or button child

preserve-newlines bool (for runtime free text that carries its own line breaks)

class Tailwind classes