DocsComponentsBadge

Badge

Primitive11 variants

Semantic status badges with 11 variants (including 3 solid fills), 4 sizes, dot indicators, pulse animations, and composable patterns for financial, SaaS, and e-commerce contexts.

#ff7b72">import { FqBadge } from '@/components/harlowui/primitives/fq-badge'
#ff7b72">export default function StatusRow() {
  #ff7b72">return (
    <#7ee787">div style={{ display: 'flex', gap: 8 }}>
      <#7ee787">FqBadge variant="success">Active</FqBadge>
      <#7ee787">FqBadge variant="warning" size="xs">Pending</FqBadge>
      <#7ee787">FqBadge variant="destructive" dot>Overdue</FqBadge>
    </#7ee787">div>
  )
}

Subtle Variants

Tinted background with matching border and text. The workhorse for most status labels.

DefaultBrandSuccessWarningDestructiveInfoMutedOutline

Solid Variants

High-contrast solid fills for maximum visibility. Use sparingly for critical statuses.

SolidSolid SuccessSolid Destructive

Sizes

XS badgexs

SM badgesm

MD badgemd

LG badgelg

Dot Indicator & Pulse

Pair dot indicators with semantic variants for live status. Pulse adds breathing animation for real-time awareness.

OnlineLiveSyncingOfflineProcessingIdle

Financial Use Cases

Badges tailored for banking, payments, and compliance workflows.

KYC VerifiedTier 2 RequiredProcessingDeclined$0.00 feePRO

Transaction Statuses

SettledPendingReversedHeldScheduled

Badges in Context

How badges compose with other components in production layouts.

Recent Activity

Stripe Payment

+$2,450.00

Settled

Wire Transfer

-$10,000.00

Pending

Refund #4821

+$89.99

Processing

Feature Flags

Dark Mode

Production

Active

AI Chat

Beta

Rolling

New Onboarding

Staging

Testing

Legacy API

Deprecated

Killed

API Reference

Prop	Type	Default	Description
`variant`	`"default" \| "brand" \| "success" \| "warning" \| "destructive" \| "info" \| "muted" \| "outline" \| "solid" \| "solid-success" \| "solid-destructive"`	`"default"`	Semantic color variant
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"sm"`	Badge size
`dot`	`boolean`	`false`	Shows a colored dot indicator
`pulse`	`boolean`	`false`	Adds a pulsing animation to the dot

PreviousButton NextAvatar