Skip to content
Pinky UI

mobile

Floating Action Island

Expands a compact create trigger into local actions and contracts while scrolling without leaving the task context.

  • mobile
  • create
  • actions
  • floating
  • scroll
Related pattern

A local action cluster keeps creation nearby while its closed state stays small enough for mobile browsing.

Live preview

Quick usage

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

<FloatingActionIsland label="Create" actions={actions} />

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 floating action island when a compact create trigger should reveal a small local set of actions without occupying a full toolbar.

Interaction anatomy

  • The closed island is a single, familiar target.
  • Open actions stay attached to the same object.
  • Scrolling can contract the closed state while expansion remains explicit.

Good for

Creation flows with two or three nearby actions.

Avoid

Primary navigation, long action menus or actions that must always be visible.

Live example

Open Create to reveal New note and New collection.

Usage

tsx
<FloatingActionIsland label="Create" actions={actions} />

Tune

Keep the action set short, preserve a 44px target and never let the closed island hide essential navigation.

Accessibility and reduced motion

Expose aria-expanded and a changing accessible label, and keep actions as buttons. Reduced motion preserves the attached row without width interpolation.

Open this skill on its own page