Components Drawers

Drawers

Right-docked companion panel — the non-modal counterpart to the modal and side tray. It squeezes the main content rather than covering it (an in-flow flex child of a dock whose width animates open), several can stack side by side, and below lg it becomes a full-screen modal sheet with a scrim.

<koala-drawer>

Canonical

This column is the page content. Opening the drawer animates the panel in from the right and squeezes this column — it is not overlaid. Resize below lg and the same drawer presents as a full-screen modal sheet with a scrim.

<div x-data="{ joeyOpen: false }" class="flex">
    <div class="flex-1">@* page content — squeezed when the drawer opens *@</div>
    <div class="koala-drawer-dock">
        <koala-drawer flag="joeyOpen" width="22rem" aria-label="Joey">
            <koala-drawer-header flag="joeyOpen">Joey</koala-drawer-header>
            <koala-drawer-content>…</koala-drawer-content>
        </koala-drawer>
    </div>
</div>

The host supplies the .koala-drawer-dock (a flex row beside the content column). ESC closes; on mobile the scrim/backdrop dismiss it too.

Variants

2 variants

Width

Stacking

Multiple drawers dock side by side; each open one squeezes the content column further.

States

3 states

Closed

Width 0 — the content column has the full width.

Open (desktop)

Docks at its width and squeezes the content beside it. No scrim — non-modal.

Open (mobile < lg)

Full-screen modal sheet with a scrim; ESC / backdrop dismiss.

Props

4 attributes

Attribute	Values	Notes
flag	string	Alpine boolean controlling open/closed (e.g. `$store.call.open`). The parent scope must declare it.
width	CSS length	Docked width on desktop. Defaults to `24rem`. Mobile is always a full-screen sheet.
title	string	Optional. Renders a default header with a close button. Omit when using `<koala-drawer-header>` or content-supplied chrome.
aria-label	string	Accessible label when no `title` is set. Falls back to `Panel`.

Sub-components

2 helpers

Tag	Attributes	Notes
<koala-drawer-header>	<code>flag</code> (string)	Title row with a close button; use when the header needs siblings (icon + title + a mono reference line). `flag` mirrors the parent so the close-X clears it.
<koala-drawer-content>	<code>class</code> (string?)	Scrollable body (`flex-1 overflow-y-auto`). Optional — content that scrolls itself (e.g. the softphone panel) can be a direct child instead.

Do & don't

Do Use a drawer for a companion surface you keep open while working the page (Joey, the softphone) — it squeezes, so the page stays usable.

Don't Don't use a drawer for a focused decision that must block the page — that's a modal (scrim, inert background) or, for editing one entity, a side tray.