← Back to Components

Badge

Versatile badge component with 11 color variants and 3 sizes for status indicators, labels, and categorization

Badge Variants

Pill vs Dot Variants

Pill Variant (default)

InfoSuccessWarningErrorPurpleNeutral

Dot Variant (with labels)

InfoSuccessWarningErrorPurpleNeutral

Dot Variant (no labels)

Use pill variant for text labels, dot variant for compact status indicators

Badge Sizes

All Size Variants

Small

Small

Medium

Medium

Large

Large

Three size options: small (18px min-height), medium (24px), large (32px)

Core Badge Variants

Status Variants

InfoSuccessWarningErrorBasicNeutral

Core status variants using design system tokens for consistent theming

Extended Color Palette

YellowRedPinkOrangePurpleBlack

Extended palette for specialized use cases and brand expression

Status Indicators

Task Status

Complete user researchDone
Design wireframesIn Progress
Conduct usability testingBlocked
Final reviewPending

Status badges for task management and workflow tracking

Priority Levels

Fix critical security vulnerabilityCritical
Improve page load performanceHigh
Update documentationMedium
Refactor legacy componentsLow

Priority badges using red-orange-yellow gradient for urgency levels

Category Tags

Content Categories

Building a Design System

DesignFrontendComponents

User Research Methods

UX ResearchAnalyticsMethodology

Category tags using different colors to distinguish content types

Feature Labels

Advanced Analytics
Pro
AI-Powered Insights
BetaNew
Team Collaboration
Standard
Legacy Import Tool
Deprecated

Feature labels with semantic colors for plan tiers and feature states

Size Comparison

Same Variant, Different Sizes

Small:StatusActivePending
Medium:StatusActivePending
Large:StatusActivePending

Choose size based on context: small for lists, medium for general use, large for emphasis