Status Badge Design System
Basic Status Badges
Success States
ActiveSuccessConnectedOnlineWarning States
IdleWarningPausedPendingError States
ErrorFailedDisconnectedOfflineOther States
ProcessingLoadingInactiveInfoSize Variants
SmallMediumLarge
Style Variants
Glass (Default)FilledOutline
Icon & Dot Variants
With Auto IconCustom IconWith DotWith Pulsing Dot
Animated IconLoadingSyncing
Agent Status Badges
ActiveIdleProcessingErrorOffline
Connection Status Badges
ConnectedConnectingDisconnectedReconnecting
Integration Status Badges
ConfiguredNot ConfiguredTestingActiveErrorUpgrading
API Status Badges
HealthyHealthy45msDegradedDownMaintenanceUnknown
Process Status Badges
RunningRunning65%QueuedCompletedFailedCancelledPaused
Deployment Status Badges
DeployedDeployedproductionDeployingPendingFailedRollback
Security Status Badges
SecureWarningCriticalScanningUnknown
Special Badges
LIVEBETANEWCOMING SOONCustom AgentCustom ServerCustom Shield
Usage Examples
In Tables
Agent AlphaActive
Agent BetaProcessing
In Cards
Telegram Integration
ActiveConnected and running
WhatsApp Integration
TestingRunning test suite...
Combined with Other Elements
API Health:Healthy32msLast checked 2 min ago
Deployment:Deployedproductionv1.2.3
Code Examples
// Basic usage
<StatusBadge status="active">Active</StatusBadge>
// With icon
<StatusBadge status="processing" icon animated>Processing</StatusBadge>
// Agent status pattern
<AgentStatusBadge agentStatus="active" />
// API status with latency
<ApiStatusBadge status="healthy" latency={45} />