overlays
Selection Toolbar
A nearby toolbar appears only after source surfaces are selected, keeping batch intent close to the selection.
- overlays
- toolbar
- selection
- batch
Selection-first toolbar for spatial sources; Selection Tray remains the data-list pattern.
Live preview
Select an item to reveal its local actions.
Quick usage
import { SelectionToolbar } from "@pinky-ui/systems";
<SelectionToolbar items={items} />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.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add selection-toolbarPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SelectionToolbarItem[] | — | Selectable source surfaces with compact metadata. |
| className | string | — | Styles the outer interaction surface. |
Accessibility
- Keyboard and touch paths match the pointer interaction.
- Stable labels and values remain available without motion.
Performance
- The action region mounts only for a non-empty selection.
- Selection is discrete and avoids a pointer-frame update loop.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Batch actions on visual collections or spatial sources
When not to use
- Single-record actions or data lists already served by Selection Tray
Skill
Purpose
Use a selection toolbar when several visual or spatial sources can be selected and their batch actions should remain close to that selection.
Interaction anatomy
- Source buttons expose pressed state.
- The toolbar appears only after at least one source is selected.
- Actions and Clear stay in one compact named region.
Good for
Visual collections, canvas objects and small sets of product surfaces.
Avoid
One-record actions, data-list batch operations already served by Selection Tray, or toolbars that are always visible.
Live example
Select two surfaces and use the contextual actions that appear below them.
Usage
<SelectionToolbar items={cards} />Tune
Show the count, keep actions consequential and short, and decide whether the toolbar is attached in flow or pinned within a bounded workspace.
Accessibility and reduced motion
Use pressed state, a real toolbar role and visible action labels. Touch users need the same selection path as pointer users. Reduced motion changes toolbar presence without sliding it away from its source.