ComponentsData Display
StatusPill
Compact operational state pill for admin tables, orders, payments, and user workflows
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
ActivePendingPickingPaidNeeds reviewFailedBlockedArchived
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
FulfilledReviewPayment failed
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
StatusPillfor workflow state, not arbitrary tags. - Use
processingwithpulseonly for live work that is actively moving. - Use
blockedfor states that require human action before work can continue. - Hide the dot in extremely tight tables, but keep the visible label.