Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesContain & overlayModal & drawer

Modal & drawer

Centered overlay dialog: scrim, focus-trap, ESC-to-close, click-outside-to-close. A nested modal can rise above an existing modal sheet without overtaking notifications.

<koala-modal>

Modal

title="Edit branch"

Edit branch

Confirm modal

variant="Danger"

Cancel quote?

This action cannot be undone.
variant="Primary"

Send to client?

The client receives the quote by email immediately.

Step modal

two-screen flow

Confirm your details

What's your name?

How should we get in touch?

Side tray

header · body · footer

Manage document

Draft contract of sale.pdf

Body scrolls; controls inside it sit on surface-container-low.

title-bind · unsaved-when · placeholder-when

Draft contract of sale

Type to rename: the heading follows on the first keystroke and takes a dashed warning underline while the edit is unsaved. Empty the field and it goes muted and italic, because "Name this document" is a stand-in and not a name.

a destructive answer takes the tray over, never a modal above it

Manage document

Draft contract of sale.pdf

The document's own record: what it is, and the form that changes it.

Delete this document?

It comes off the list for everyone and goes to the bin, where you can put it back from Restore deleted.

Drawer

responsive contextual drawer

Panel frame

Two panes, one frame
Messages 1 needs reply
Aisha Rahman Waiting on a reply
Tom Whitfield Answered yesterday
View all conversations
Aisha Rahman WhatsApp

Hi, sorry for the delay. We're following up about your request.

03:17 PM

Replies closed Choose template
koala-panel-context title string
koala-bottom-sheet flag string (Alpine boolean)
koala-bottom-sheet title string
koala-bottom-sheet dismissable bool (default true)
koala-bottom-sheet options Alpine object literal
koala-panel-context icon IconName

Panel dock

koalaPanelDock()
Open a panel

Bottom sheet

koala-bottom-sheet

Step through it. The sheet is exactly as tall as the step inside, so the height changes with the flow.

Confirm the sale

Twelve files are waiting to go in.

Files waiting
File
contract-page-1.pdf
contract-page-2.pdf
contract-page-3.pdf
contract-page-4.pdf
contract-page-5.pdf
contract-page-6.pdf
contract-page-7.pdf
contract-page-8.pdf
contract-page-9.pdf
contract-page-10.pdf
contract-page-11.pdf
contract-page-12.pdf

Everything checks out. Send it to the buyer's solicitor?

API

koala-modal flag string (Alpine boolean)
koala-modal title string
koala-modal size SmallMediumLargeExtraLargeExtraExtraLargeFull
koala-modal height AutoFillTallFull
koala-modal nested bool
koala-modal dismissable bool
koala-modal show-close bool
koala-modal aria-label string
koala-confirm-modal variant DangerPrimary
koala-confirm-modal form-handler string
koala-confirm-modal confirm-text string
koala-confirm-modal cancel-text string
koala-confirm-modal reason-field-name string
koala-confirm-modal choice-field-name string
koala-step-modal flag string (Alpine boolean)
koala-step-modal title string (header + close, as koala-modal)
koala-step-modal aria-label string (when there is no title)
koala-step-modal show-close bool (default true)
koala-step-modal dismissable bool
koala-step-modal teleport bool (no-op: a dialog needs none)
koala-tray-header title string
koala-tray-header subtitle string?
koala-tray-header title-icon IconName? (decorative glyph before the title, such as a file type)
koala-tray-header title-icon-class string? (token colour class for that glyph)
koala-tray-header title-badge-html string? (raw HTML)
koala-tray-header title-bind Alpine expression (title follows a renameable subject)
koala-tray-header unsaved-when Alpine expression (dashed warning underline)
koala-tray-header placeholder-when Alpine expression (muted italic stand-in)
koala-tray-body class string
koala-tray-footer class string
koala-drawer-header close-action Alpine expression
koala-drawer-header show-close bool
koala-drawer-header close-mobile-only bool
koala-drawer-header density Comfortable · Compact
koalaPanelDock columnWidth number
koalaPanelDock pageMinWidth number
koalaPanelDock maxAutoColumns number
koalaPanelDock iconRegistryId string
koalaPanelDock iconKinds string[]
koalaPanelDock state object (optional openPanels + activePanelKey)
koalaPanelDock panelbar bool
koalaPanelDock panels object[] (available panel catalogue)
koalaPanelDock togglePanel method (kind, id)
koalaPanelDock focusPanel method (kind, id)
koalaPanelDock isPanelOpen method (kind, id)