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

<koala-tray-header title="Edit assignment" subtitle="@Model.EntityName" />
<koala-tray-body>
    <form method="post" x-target="side-tray-content">
        @* form fields *@
    </form>
</koala-tray-body>
<koala-tray-footer>
    <button koala-btn="Secondary" type="button" x-on:click="$dispatch('close-side-tray')">Cancel</button>
    <button koala-btn="Primary" type="submit" koala-loading>Save</button>
</koala-tray-footer>

Click to open a real <dialog class="side-tray"> with the genuine koala-tray-header / body / footer chrome. The trigger dispatches open-side-tray; ESC, the backdrop and the close-X all dispatch / honour close-side-tray — exactly the shell wiring used in the portal. The tray content lives in #side-tray-content; in production it's AJAX-loaded.

Production trigger

Set partner

<a koala-tray-link href="@Url.Page("Edit", new { id = Model.Id })" koala-btn="Primary">Set partner</a>

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 the real tray chrome with inline content (rather than an AJAX-loaded href) so the demo is visible without a server 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.