Overlay — 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.
Modal
Confirm modal
Step modal
Side tray
Manage document
Draft contract of sale.pdf
Body scrolls; controls inside it sit on surface-container-low.
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.
Manage document
Draft contract of sale.pdf
The document's own record — what it is, and the form that changes it.
It comes off the list for everyone and goes to the bin, where you can put it back from Restore deleted.
Panel frame
stringstring (Alpine boolean)stringbool (default true)Alpine object literalIconNamePanel dock
Chase Searchflow for the outstanding local authority search.
Mortgage offer issued — valid for 6 months.
Bottom sheet
Step through it — the sheet is exactly as tall as the step inside, so the height changes with the flow.
API
string (Alpine boolean)stringSmallMediumLargeExtraLargeExtraExtraLargeAutoFillTallboolboolboolstringDangerPrimarystringstringstringstringstringstring (Alpine boolean)string (header + close, as koala-modal)string (when there is no title)bool (default true)boolbool (no-op — a dialog needs none)stringstring?IconName? (decorative glyph before the title — a file type, say)string? (token colour class for that glyph)string? (raw HTML)Alpine expression (title follows a renameable subject)Alpine expression (dashed warning underline)Alpine expression (muted italic stand-in)stringstringAlpine expressionboolboolComfortable · Compactnumbernumbernumberstringstring[]object (optional openPanels + activePanelKey)boolobject[] (available panel catalogue)method (kind, id)method (kind, id)method (kind, id)