Skip to content
Pinky UI

data

Selection Tray

A contextual action tray appears when multiple data items are selected and stays out of the way otherwise.

  • data
  • selection
  • batch
  • actions

Live preview

Quick usage

usage
import { SelectionTray } from "@pinky-ui/systems";

<SelectionTray items={items} actions={[{ id: "archive", label: "Archive", onAction: archive }]} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
itemsSelectionTrayItem[]—Selectable records with a label and optional supporting metadata.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Native checkboxes provide an explicit selection path and the tray exposes a named action region.
  • Clear and batch actions remain visible and keyboard reachable when selection is active.

Performance

  • The tray mounts only with a non-empty selection and actions receive the selected records directly.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Batch actions on lists, tables and collection management screens

When not to use

  • One-off actions that do not benefit from multi-select

Skill

Purpose

A contextual action tray appears when multiple data items are selected and stays out of the way otherwise — batch actions without a permanent toolbar.

Good for

  • Batch actions on lists, tables and collection management screens

Avoid for

  • One-off actions that do not benefit from multi-select

Usage

tsx
<SelectionTray items={items} actions={[{ id: "archive", label: "Archive", onAction: archive }]} />

Accessibility

  • Native checkboxes provide an explicit selection path and the tray exposes a named action region.
  • Clear and batch actions remain visible and keyboard reachable when selection is active.

Performance

  • The tray mounts only with a non-empty selection and actions receive the selected records directly.

Related: filter-rail, reorderable-list.

Open this skill on its own page