Navigation
Task tray
A place to park work without finishing or losing it. Set a task aside and it minimizes to a chip in a tray docked at the bottom of the screen — like minimized windows. Restore one with a click, restore all at once, collapse the tray when it’s in the way.
npx shadcn@latest add @orbit/task-trayOverview
Minimize an active card with the “—”, click a tray chip (or its ↑) to restore it, dismiss with ×, collapse the tray from its handle, or Restore all. The tray hides itself once it holds nothing.
Collapsed
Folded down to just the handle and count when the screen is needed — the caret flips and the chips return on expand.
Props
The tray positions absolutely inside the nearest relative container by default, which keeps docs demos framed. In a real app pass fixed so it floats over every view at the bottom of the viewport.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TaskTrayItem[] | — | Minimized tasks: { id, name, status? }. The tray renders nothing while empty. |
| expanded / defaultExpanded | boolean | true | Controlled / uncontrolled collapse state. |
| onExpandedChange | (expanded: boolean) => void | — | Handle toggled. |
| onRestore | (item) => void | — | Chip or its ↑ clicked — bring the task back. |
| onDismiss | (item) => void | — | Chip’s × clicked — drop it from the tray. |
| onRestoreAll | () => void | — | “Restore all” clicked. |
| label | string | "Set aside" | Handle label (also the chip list’s accessible name). |
| fixed | boolean | false | position: fixed for a real app dock instead of absolute. |
| …rest | HTMLAttributes | — | Forwarded to the root <div>, including ref. |
Usage
Keep chips scannable
Carry the status colour and title into each chip so a glance at the tray tells you what’s parked there.
Let it become a graveyard
A tray that fills with dozens of forgotten chips is just clutter. Nudge people to restore or clear stale items.
Make restore effortless
One click back in. The whole value of setting aside is the confidence that it’s trivial to pick back up.
Use it for long-term holds
For “someday” work use a backlog or a snooze with a date. The tray is for the span of a single work session.
Keyboard & accessibility
The handle is a real button carrying aria-expanded; each chip exposes labelled Restore and Dismiss buttons, so every action is reachable by Tab. Status is conveyed by the chip label, not colour alone, via the accessible names.