Modals
Centered confirmation dialog with icon-circle, body, and Cancel / Confirm buttons. Backdrop dismisses; ESC closes; the form posts to a handler and swaps the page underneath via Alpine-AJAX.
Canonical
Cancel quote?
Are you sure you want to cancel Q-2026-0421?
This action cannot be undone.
Click the trigger to open the real <koala-confirm-modal>. ESC closes;
backdrop dismisses; the form would post to a handler in a real page.
Variants
2 variantsDelete activity?
This action cannot be undone.
Send to client?
The client will receive the quote by email immediately.
States
3 statesModal open
Press ESC, click the backdrop, or use Cancel to close.
x-on:keydown.escape.windowProps
11 attributes| Attribute | Values | Notes |
|---|---|---|
| flag | string | Alpine variable controlling open/closed. Defaults to confirmOpen. The parent x-data must declare it. |
| variant | Danger, Primary | Icon-circle colour, confirm-button colour, and default icon. |
| title | string | Bold heading above the body content. |
| icon | IconName | Override the variant's default icon. |
| form-handler | string | Razor page handler name. Posts to ?handler={name}. |
| form-action | URL | Override the action URL entirely. |
| form-route-id | Guid | Appended as ?id= to the handler URL. |
| form-route-note-id | Guid | Appended as ?noteId= when present. |
| form-target | string | Alpine-AJAX target element id. Defaults to main. |
| form-target-push | bool | Defaults to true. Pushes a new history entry on swap. |
| confirm-text / cancel-text | string | Button labels. Default to Confirm / Cancel. |
Do & don't
Generic modal
<koala-modal> with optional
<koala-modal-header> /
<koala-modal-content> /
<koala-modal-footer> children. Owns the scrim,
scroll-lock, focus-trap, ESC-to-close, and click-outside-to-close. Use this for richer
interactions where the confirm modal isn't expressive enough.
Edit branch
A simple form modal with a title attribute. The header / close button render automatically.
Quote details
AcceptedUse a custom header when the title needs siblings (status badge, version picker, breadcrumb).
Sizes
| size | Use for |
|---|---|
| max-w-md (default) | Short forms, 1–3 fields. |
| max-w-lg | Standard edit modals (3–6 fields). |
| max-w-2xl | Detail views, side-by-side fields. |
| max-w-4xl | Embedded maps / tables. |