StatusPill

The StatusPill component communicates operational state in dense admin screens. Use it for order state, payment status, fulfillment progress, user state, and system review outcomes.

Import

import { StatusPill } from '@nim-ui/components';

Basic Usage

Operational States

ActivePendingPickingPaidNeeds reviewFailedBlockedArchived

View Code

<StatusPill status="active">Active</StatusPill>
<StatusPill status="pending">Pending</StatusPill>
<StatusPill status="processing" pulse>Picking</StatusPill>
<StatusPill status="success">Paid</StatusPill>
<StatusPill status="warning">Needs review</StatusPill>
<StatusPill status="failed">Failed</StatusPill>
<StatusPill status="blocked">Blocked</StatusPill>
<StatusPill status="archived">Archived</StatusPill>

Compact Table Cell

Without Dot

FulfilledReviewPayment failed

View Code

<StatusPill status="success" showDot={false} size="sm">Fulfilled</StatusPill>
<StatusPill status="warning" showDot={false} size="sm">Review</StatusPill>
<StatusPill status="failed" showDot={false} size="sm">Payment failed</StatusPill>

Props

Name	Type	Default	Description
status	'active' | 'pending' | 'processing' | 'success' | 'warning' | 'failed' | 'blocked' | 'archived'	'pending'	Operational state mapped to a semantic color treatment.
size	'sm' | 'md' | 'lg'	'md'	Compact sizing for table cells or larger sizing for detail panels.
showDot	boolean	true	Show or hide the decorative state dot.
pulse	boolean	false	Adds a subtle pulse to the dot for in-progress states.
className	string	-	Additional classes for spacing or layout integration.
children *	ReactNode	-	Visible status label.

Backoffice Guidance

• Use StatusPill for workflow state, not arbitrary tags.
• Use processing with pulse only for live work that is actively moving.
• Use blocked for states that require human action before work can continue.
• Hide the dot in extremely tight tables, but keep the visible label.