Skip to content
Pinky UI

mobile

Contextual Bottom Bar

Transforms the same bottom region from primary navigation into selection actions while preserving spatial ownership.

  • mobile
  • selection
  • navigation
  • toolbar
  • safe area
Related pattern

A lower surface changes job when selection changes, instead of adding a second detached toolbar.

Live preview

Quick usage

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

<ContextualBottomBar selectedCount={selectedCount} onClearSelection={clearSelection} />

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 contextual bottom bar when the same lower region should become selection actions after the user selects content.

Interaction anatomy

  • Navigation is the resting state.
  • Selection replaces the lower job without adding a detached toolbar.
  • Cancel, count and actions remain in one named region.

Good for

Mobile collections where selection is occasional and batch actions are short.

Avoid

Permanent action trays, long action lists or unrelated modal workflows.

Live example

Pass a positive selectedCount to transform the navigation region into actions.

Usage

tsx
<ContextualBottomBar selectedCount={selectedCount} onClearSelection={clearSelection} />

Tune

Keep two or three actions maximum, show the selected count and preserve a clear cancel path.

Accessibility and reduced motion

Expose navigation and toolbar semantics for the active mode, label actions, and retain safe-area padding. Reduced motion changes mode without relying on a slide.

Open this skill on its own page