Skip to content
Pinky UI

mobile

Sticky Bottom CTA

Keeps the next product action attached to the lower edge with honest pending and disabled states.

  • mobile
  • cta
  • sticky
  • safe area
  • action
Related pattern

A mobile action surface owns the next step without covering the content or relying on a desktop footer.

Live preview

The action stays with the reading surface while the next decision is nearby.

Ready for the next step

Quick usage

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

<StickyBottomCTA label="Continue" description="Ready for the next step" onAction={continueFlow} />

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 sticky bottom CTA when the next product decision should stay reachable while a mobile surface scrolls.

Interaction anatomy

  • A short description explains the next step.
  • The action remains inside a safe-area-aware lower region.
  • Pending and disabled states keep the button geometry honest.

Good for

Checkout steps, short forms, review screens and progressive product flows.

Avoid

Several competing primary actions or pages where the footer would cover content.

Live example

Activate the CTA and compare the stable action surface with its pending state.

Usage

tsx
<StickyBottomCTA label="Continue" onAction={continueFlow} />

Tune

Keep the copy concise, reserve content padding and make pending truthfully disable repeated submission.

Accessibility and reduced motion

Use a labelled region, a native button and visible pending text. Reduced motion does not change the action or its status language.

Open this skill on its own page