Skip to content
Pinky UI

feedback

Status Pill

A compact state indicator that carries progress and semantic status.

  • feedback
  • status
  • progress
  • state

Live preview

Working42%Ready

Quick usage

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

<StatusPill label="Uploading" state="working" progress={42} />

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 for a compact state that remains near the object it describes, optionally carrying bounded progress.

Use when

An upload, processing task, draft, ready, failed, or live state needs to stay visible.

Avoid

Pure decoration, unbounded percentages, or replacing a detailed error message.

Accessibility

Expose the label and state through status semantics; never communicate state by color alone.

Keyboard and touch

If the pill is actionable, make it a real button and preserve a 44px touch target.

Reduced motion and performance

Animate only meaningful state changes and resolve immediately under reduced motion.

Composition and anti-patterns

Pair with Inline Feedback for detail. Do not make a pill the only recovery route.

Open this skill on its own page