Skip to content
Pinky UI

mobile

Mobile Selection Bar

Turns selected content into a safe-area-aware action bar while leaving each source item individually operable.

  • mobile
  • selection
  • batch action
  • safe area
  • touch
Related pattern

Selection is visible where it happens, and the action tray arrives only after a real item choice.

Live preview

Quick usage

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

<MobileSelectionBar items={items} onAction={moveItems} />

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

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use a mobile selection bar when list items become batch-action sources only after an explicit selection.

Interaction anatomy

  • Each source item exposes pressed state.
  • The lower action region appears after selection.
  • Clear and the primary batch action stay reachable near the selection.

Good for

Saved items, files, notes and small mobile collections.

Avoid

Single-item actions or large datasets that need a dedicated selection model.

Live example

Select North star or Release notes to reveal the safe-area-aware action region.

Usage

tsx
<MobileSelectionBar items={items} onAction={moveItems} />

Tune

Keep source rows large enough for touch, show the count and make the batch action specific.

Accessibility and reduced motion

Use aria-pressed, a named toolbar and visible Clear/Move labels. Reduced motion changes toolbar presence without relying on a slide.

Open this skill on its own page