Feedback

ProgressPill

A live status pill — spinner, shimmer sweep, and a step caption.

A reusable status pill for long-running operations: a tinted bordered chip with an inline braille spinner, an animated gradient shimmer sweep while active, and an optional muted caption line describing the current step. Purely presentational — map your own state machine to label, tone, active, and caption, and use it for deletes, deploys, imports, syncs, or batch jobs. Five tones, reduced-motion safe, announces changes via role="status".

Deleting…Purging retained data

Syncing…Fetching remote changes

Completed

Installation

Add the package. A presentational status pill for long-running operations — spinner glyph, shimmer sweep, and an optional step caption. It ships its own CSS, so there's nothing else to wire up.

pnpm add @roy-ui/ui

Import

import { ProgressPill } from '@roy-ui/ui';

// or just this component:
import { ProgressPill } from '@roy-ui/ui/progress-pill';

Usage

ProgressPill is purely presentational — it has no polling, no queries, and no domain types. Your code maps its state machine to four props: label (the pill text), tone (the color), active (whether it's still running), and caption (the human description of the current step). That keeps one pill reusable across deletes, deploys, imports, exports, syncs, and batch jobs.

A live operation

While active, the pill shows a braille spinner and a gradient shimmer sweeps across it. The caption is the live description of what is happening right now — always pass real, state-derived text, never hardcoded fiction. When the operation settles, flip active off and swap the label: spinner and shimmer simply stop.

Deploying…Building application

tsx

// running
<ProgressPill
  label="Deploying…"
  tone="info"
  caption={currentStepLabel}   // e.g. "Uploading assets"
/>

// settled
<ProgressPill
  label="Deployed"
  tone="success"
  active={false}
  caption="Live at royui.dibbayajyoti.com"
/>

Tones & states

Five tones cover the usual operation flavors: danger for destructive work, warning for degraded or retryable states, info and neutral for benign progress, success for done. Color is never the only signal — the label text always states the state, so pick the label first and the tone second.

All five tones, active

Each tone tints the border, background, and text of the pill. The spinner and shimmer run in every tone while active.

Deleting…

Retrying…

Queued…

Finishing…

Syncing…

tsx

<ProgressPill label="Deleting…" tone="danger" />
<ProgressPill label="Retrying…" tone="warning" />
<ProgressPill label="Queued…" tone="neutral" />
<ProgressPill label="Finishing…" tone="success" />
<ProgressPill label="Syncing…" tone="info" />

Settled states

With active={false} the pill is visually calm: no spinner, no shimmer. Use it for terminal states — completed, failed, partial failure — or quiet waiting states like a pending purge window.

Completed

Failed

Partially failed — retry

Deleted — purge in 29d

tsx

<ProgressPill label="Completed" tone="success" active={false} />
<ProgressPill label="Failed" tone="danger" active={false} />
<ProgressPill label="Partially failed — retry" tone="warning" active={false} />
<ProgressPill label="Deleted — purge in 29d" tone="neutral" active={false} />

Behavior & accessibility

Long labels and captions truncate with an ellipsis instead of shifting layout, and the spinner glyph reserves a fixed width so its frames never nudge the text. The shimmer rides on a ::after overlay with pointer-events: none, so it never blocks clicks on anything under or inside the pill. Under prefers-reduced-motion the shimmer sweep is removed and the spinner becomes a static ellipsis. The pill renders with role='status' and aria-live='polite' while active, so screen readers announce label and caption changes; the spinner glyph itself is aria-hidden. Caption changes crossfade in over 120ms — there's no layout animation, and no exit animation when the pill settles (row-level exits belong to your list, not this component).

Theming

/* Every tone color is a CSS variable — override on the pill or :root. */
.royui-progresspill {
  --royui-progresspill-info-fg: #60a5fa;
  --royui-progresspill-info-bg: rgba(96, 165, 250, 0.1);
  --royui-progresspill-info-border: rgba(96, 165, 250, 0.32);
  --royui-progresspill-caption-fg: rgba(140, 146, 158, 0.85);
  --royui-progresspill-shimmer: rgba(255, 255, 255, 0.14);
}

Props

Everything else you pass (className, style, data-*, event handlers) is spread onto the outer container div.

Prop	Type	Default	Description
`label`	`string`	`—`	Pill text, e.g. "Deleting…", "Deploying…", "Synced". Required.
`tone`	`'danger' \| 'warning' \| 'neutral' \| 'success' \| 'info'`	`'neutral'`	Color tone of the pill.
`active`	`boolean`	`true`	Drives the spinner glyph and shimmer sweep. false renders a settled, calm pill.
`caption`	`string \| null`	`null`	Secondary muted line under the pill describing the current step.
`title`	`string`	`caption ?? label`	Native tooltip on the container.
`className`	`string`	`—`	Extra classes for the outer container.

ProgressPill

A live status pill — spinner, shimmer sweep, and a step caption.

Usage

// running <ProgressPill label="Deploying…" tone="info" caption={currentStepLabel} // e.g. "Uploading assets" /> // settled <ProgressPill label="Deployed" tone="success" active={false} caption="Live at royui.dibbayajyoti.com" />

<ProgressPill label="Deleting…" tone="danger" /> <ProgressPill label="Retrying…" tone="warning" /> <ProgressPill label="Queued…" tone="neutral" /> <ProgressPill label="Finishing…" tone="success" /> <ProgressPill label="Syncing…" tone="info" />

<ProgressPill label="Completed" tone="success" active={false} /> <ProgressPill label="Failed" tone="danger" active={false} /> <ProgressPill label="Partially failed — retry" tone="warning" active={false} /> <ProgressPill label="Deleted — purge in 29d" tone="neutral" active={false} />

Behavior & accessibility

/* Every tone color is a CSS variable — override on the pill or :root. */ .royui-progresspill { --royui-progresspill-info-fg: #60a5fa; --royui-progresspill-info-bg: rgba(96, 165, 250, 0.1); --royui-progresspill-info-border: rgba(96, 165, 250, 0.32); --royui-progresspill-caption-fg: rgba(140, 146, 158, 0.85); --royui-progresspill-shimmer: rgba(255, 255, 255, 0.14); }

Prop

Type

Default

Description

label

string

—

Pill text, e.g. "Deleting…", "Deploying…", "Synced". Required.

tone

'danger' | 'warning' | 'neutral' | 'success' | 'info'

'neutral'

Color tone of the pill.

active

boolean

true

Drives the spinner glyph and shimmer sweep. false renders a settled, calm pill.

caption

string | null

null

Secondary muted line under the pill describing the current step.

title

string

caption ?? label

Native tooltip on the container.

className

string

—

Extra classes for the outer container.