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, and click-outside-to-close.

<koala-modal>

Modal

title="Edit branch"

Edit branch

Step modal

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-header title string
koala-panel-header class string
koala-panel-body class string
koala-panel-footer class string
koala-bottom-sheet flag string (Alpine boolean)
koala-bottom-sheet-header title string
koala-bottom-sheet-header class string
koala-bottom-sheet-body class string
koala-bottom-sheet-footer class string
koala-bottom-sheet dismissable bool (default true)
koala-bottom-sheet options Alpine object literal
koala-bottom-sheet x-on:koala-bottom-sheet-dismiss Alpine expression — caller-owned dismissal state.
koala-panel-header icon IconName

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 dismissable bool
koala-modal show-close bool
koala-modal aria-label string
koala-modal x-on:koala-modal-dismiss Alpine expression — caller-owned dismissal state.
koala-modal-header class string
koala-modal-body class string
koala-modal-footer class string
koala-confirm-actions confirm-text string
koala-confirm-actions cancel-text string
koala-confirm-actions tone Tone (defaults to the dialog's)
koala-tray-body class string
koala-tray-footer class string
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)