Solid badges: Full-color background with white text for high visibility. Use for primary status indicators that need to stand out.

Subtle badges: Light tinted background with dark text and tinted border. Use when you need semantic colors with moderate visual weight.

Soft badges: Same tinted background as subtle, but without a border. Use for softer emphasis where the border adds too much visual noise. Note: .tw-badge-secondary-soft is visually identical to the default .tw-badge — use it when you want an explicit semantic choice that matches the naming system.

Outline badges: Transparent background with colored border and text. Use for secondary emphasis or when you need a lighter visual weight.

Text-only badges: No background or border — just colored text. Use for minimal inline indicators where the badge should blend with surrounding text.

Sizes: Small for compact spaces (table cells), default for general use, large for emphasized labels.

Shape variants: Badges have pill shape (fully rounded) by default. Use .tw-badge-rounded for subtle rounded corners. For perfect circles, see the Circle Badges section below.

Circle badges: Perfect circle shape that doesn't expand horizontally. Ideal for notification counts, numeric indicators, and single-character labels. Use .tw-badge-circle with any color variant.

Dot badges: Add a colored dot prefix for status indicators. The dot inherits the badge text color. Best used with subtle, soft, outline, or text-only tiers where the dot color is visible against the background. Dot size scales proportionally with badge size (sm/default/lg).

Label badges: Use .tw-badge-key inside a badge to create a key-value label. The key portion gets a semibold weight and a right separator. Works with all variants and sizes.

Combining modifiers: You can combine size, shape, and dot modifiers with any color variant across all five tiers.

Real-world usage: Badges in context with other components.

Migrating from prototype: Class mapping for existing prototype pages.