revido kit
Start building
← All components
feedback / stable

ProgressPill

Compact tabular percentage and progress track with detail available on hover or focus.

LIVE PREVIEW
Loading preview…

When to use

  • Known completion at the end of a record's property bar.

Consider an alternative

  • Unknown scope — show No scope yet.
  • Pending button actions — use Spinner.

Import

import { ProgressPill } from '@revido-llc/kit';

Keyboard interaction

  • Tab — focus to read detail
  • Escape — dismiss detail

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

value (required)number—Progress from 0 to 100; out-of-range values are clamped.
classNamestring—
detailReactNode—
labelstring"Progress"Accessible name.
tone"primary" | "success" | "warning""primary"
tooltipboolean—Reveal detail or descriptive valueText on hover/focus. Defaults on for detail or text longer than the percentage.
valueTextstring—Visible and accessible completion text, e.g. "11% of items".
variant"outline" | "ghost""outline"Bordered bar chip, or a chip-less ghost track inside a rail value.

Examples

Tones

<ProgressPill value={42} detail="5 of 12 features done" />
<ProgressPill value={100} tone="success" detail="All 12 features done" />

Zero and complete

<ProgressPill value={0} />
<ProgressPill value={100} />

Descriptive value tooltip

<ProgressPill value={42} valueText="42% of planned SP" />
<ProgressPill value={42} valueText="42% of planned SP" tooltip={false} />

Related components