Stronger emphasis treatment, same semantic families.
CompletedProcessingDraftPendingCancelled
Sizes
Small 24px, Medium 32px (default), Large 40px — 12px canonical radius at every size.
ActiveActiveActive
With icons vs. without icons
showIcon toggles the Lucide icon; the dot indicator is the passive fallback.
With iconVerifiedUnavailable
Without icon (dot)VerifiedUnavailable
Real-world examples
Booking, payment, listing and account status usage.
Booking statusConfirmed
Payment statusProcessing
Listing statusPending
Account statusSuspended
In context
Table, card, icon-emphasis, longer text, and compact-space usage.
In a table
Booking #1042
Active
In a card
Sunset CruiseIn Progress
With longer text
Requires Review
In compact space
Live
States
Default and disabled are properties of the badge itself. Hover/focus only apply when a badge is placed inside an interactive control — the control owns that behaviour, not the badge.
DefaultActive
DisabledActive
Focus (owned by wrapper button)
Typography Calibration
Approved & implemented. Candidate C was approved and is now live in production LagoStatusBadge (Small 11/16/400, Medium 13/18/500, Large 14/20/500). The section below is preserved as historical QA documentation of the calibration process.
Current Baseline (Production)
Actual production typography values inspected from LagoStatusBadge.jsx. Base class uses font-semibold (600) and leading-none (line-height: 1, unitless) — the leading-none overrides the text-* fontSize line-height. This is the source of the 'too large / too heavy' feedback on Small.
smallActivePendingCancelled
mediumActivePendingCancelled
largeActivePendingCancelled
Size
Font size
Line height
Weight
small
12px
1 (leading-none)
600
medium
12px
1 (leading-none)
600
large
13px
1 (leading-none)
600
Candidate A — lighter
400 weight across all sizes. Small steps down to 11px to feel compact and informational, not like a miniature button.
smallActivePendingCancelled
mediumActivePendingCancelled
largeActivePendingCancelled
Size
Font size
Line height
Weight
small
11px
16px
400
medium
12px
18px
400
large
13px
18px
400
Candidate B — compact
500 weight across all sizes. Small steps down to 11px — heavier than A but still compact and restrained.
smallActivePendingCancelled
mediumActivePendingCancelled
largeActivePendingCancelled
Size
Font size
Line height
Weight
small
11px
16px
500
medium
12px
18px
500
large
13px
18px
500
Candidate C — responsive hierarchy
Small materially smaller/lighter (11/16/400). Medium moderate (13/18/500). Large slightly larger while restrained (14/20/500). Creates a visible size/weight hierarchy across the three levels.
smallActivePendingCancelled
mediumActivePendingCancelled
largeActivePendingCancelled
Size
Font size
Line height
Weight
small
11px
16px
400
medium
13px
18px
500
large
14px
20px
500
Individual Size Tests
Specific typography combinations for isolated evaluation. Each row shows one combination across the three test statuses.
small
11 / 16px / 400ActivePendingCancelled
11 / 16px / 500ActivePendingCancelled
12 / 16px / 400ActivePendingCancelled
medium
12 / 18px / 400ActivePendingCancelled
12 / 18px / 500ActivePendingCancelled
13 / 18px / 500ActivePendingCancelled
large
13 / 18px / 500ActivePendingCancelled
14 / 20px / 500ActivePendingCancelled
13 / 20px / 500ActivePendingCancelled
Responsive Matrix
Each candidate rendered at 7 viewport widths to evaluate whether typography should step down on tablet/mobile. Badges use the candidate's fixed typography — the purpose is to judge whether they look proportional or oversized at each width.