Skip to content
Pinky UI

overlays

Expanding Action Surface

A compact object action expands into an attached action row while retaining the source identity.

  • overlays
  • actions
  • expand
  • toolbar
Related pattern

One object's action row expands in place; it is not a generic dropdown trigger.

Live preview

Project brief

Actions expand from the object they affect.

Quick usage

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

<ExpandingActionSurface />

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
classNamestring—Styles the action surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Only the local action row mounts after intent.
  • Reduced motion preserves the same attached row without travel.

Reduced motion

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

When to use

  • Secondary actions that should stay hidden until the object is active

When not to use

  • Primary calls to action or batch operations

Skill

Purpose

Use an expanding action surface when one object has secondary actions that should appear in place without becoming a generic dropdown.

Interaction anatomy

  • A compact object row owns the More trigger.
  • The attached action row expands beneath the same object.
  • Closing returns to the compact source without changing identity.

Good for

Project rows, content cards and short object-level action sets.

Avoid

Primary CTAs, multi-record batch actions or large navigational menus.

Live example

Open More actions on the project brief and use the attached row.

Usage

tsx
<ExpandingActionSurface />

Tune

Keep the row short, choose one clear trigger label, preserve the source header and use explicit destructive wording.

Accessibility and reduced motion

Use aria-expanded, aria-controls and a named toolbar. Escape closes and focus stays in the local surface. Reduced motion preserves the row without height interpolation.

Open this skill on its own page