Components Side trays

Side trays

Sticky-bottom-anchored panel for editing a single entity in place. Built on a real <dialog>, opened via Alpine-AJAX dispatch, with a header / body / footer structure that keeps the action bar always visible.

<koala-tray-*>

Canonical

Click to open a real <dialog class="side-tray">. ESC closes; backdrop click closes; the close-X dispatches close-side-tray in real pages.

Production trigger

Set partner

In production, tray triggers use <a koala-tray-link href="...">. On desktop the helper AJAX-loads href into #side-tray-content; on mobile it falls back to a full-page navigation; Ctrl/⌘-click opens in a new tab. The Canonical above uses a JS-driven dialog so the demo is visible without a real tray endpoint.

Variants

3 sub-components

Edit assignment

Koala Demo

esc

Header

<koala-tray-header>

Scrollable middle section.

Body

<koala-tray-body>

Footer

<koala-tray-footer>

States

3 states

Closed

Triggers open-side-tray dispatch

ESC

ESC dismiss

Confirms before closing if dirty

Dirty

Tracks any input change; warns on dismiss

Props

4 attributes

Element	Attribute	Notes
koala-tray-header	title	Required. Bold heading at the top of the tray.
koala-tray-header	subtitle	Smaller muted line below the title (entity name, reference, etc.).
koala-tray-body	class	Extra classes append to the standard `flex-1 overflow-y-auto px-6 sm:px-8 py-6`.
koala-tray-footer	class	Extra classes append to the standard `shrink-0 border-t flex justify-end gap-3`.

Do & don't

Edit note

esc

Single-entity form, sticky save bar at the bottom.

Do Use a tray for editing a single entity in place — one note, one assignment, one fee. The user keeps the page underneath as context.

Create quote — step 1 of 4

esc

Multi-step wizard with a stepper.

Don't Don't push multi-step flows into a tray. The narrow column cramps the stepper and a wizard's back/forward navigation conflicts with the tray's close affordance.