Status Badge
Semantic badge that maps status values to labels, variants, icons, and dots.
When To Use
- Use Status Badge when information needs to be scanned quickly and compared across multiple rows, cards, or values.
- Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
- Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.
When Not To Use
- Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
- Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.
Accessibility Notes
- Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
- Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
- Do not rely on color alone to communicate trend, status, or state in charts and metric cards.
Key Props / API
Props
status, label, variant, variantMap, labelMap, icon
Key exports
StatusBadge, statusBadgeVariantFor, statusLabel
Example Code
import { StatusBadge } from "@hilum/ui"
<StatusBadge status="active" showDot />
<StatusBadge status="pending" showDot />
<StatusBadge status="draft" showDot />
<StatusBadge status="failed" showDot />Mapped Status
Default mappings
Common product states map to success, warning, secondary, and destructive variants.
ActivePendingDraftFailed
Custom Mapping
Custom labels and icons
Override labels, variants, or icons without rebuilding badge markup.
Queued for syncVerifiedFlaggedFailed