Variants

Different configurations and states available for badge components to accommodate various labeling requirements, informational displays, and visual emphasis needs. These variants provide flexibility in appearance, content type, and semantic meaning while maintaining design consistency across the system.

Badges

Compact labeling elements that display status information, counts, categories, or other descriptive content. These components serve as informational indicators within interfaces, adapting their appearance and content structure based on context, importance, and information type to provide clear visual communication and maintain consistent user experience across all interface contexts.

Type Variants

Content structure configurations that determine the information display and layout format of badge components. These variants control the type of content and visual presentation to match different informational requirements.

Basic

Text-based badge structure for displaying labels, status indicators, or categorical information. Use for general labeling, feature tags, status displays, or when communicating simple textual information without numerical values.

Count

Number-focused badge structure optimized for displaying numerical values, quantities, or metrics. Use for notification counts, item quantities, progress indicators, or when emphasizing numerical data and measurements.

Style Variants

Visual presentation modes that affect the badge's background treatment and overall appearance within the interface. These variants determine the visual weight and prominence approach for different design contexts and emphasis requirements.

Solid

Bold badge styling with full background fill and high contrast appearance. Use for primary badges requiring strong visual presence or when badges need maximum visibility and emphasis within the interface.

Smooth

Subtle badge styling with soft background treatment and integrated appearance. Use for secondary badges that should blend naturally with interface content while maintaining clear visibility and readability.

Outline

Bordered badge styling with transparent background and defined edge treatment. Use for minimal badges requiring subtle emphasis or when maintaining visual hierarchy without adding visual weight to the interface.

Context Variants

Visual styles and semantic meanings that communicate badge purpose, importance, and information type within the interface hierarchy. These variants determine the badge's color treatment, visual prominence, and contextual messaging to guide user attention and convey information significance.

Default

Standard badge styling for general-purpose labeling that doesn't require special emphasis. Use for neutral information, general categories, or non-critical labels that provide helpful context without demanding attention.

Alternate

Alternative styling variant optimized for different backgrounds or emphasized contexts. Use as a visual alternative to default styling in sections with alternate backgrounds or special interface contexts.

Primary

Represents important information that users should prioritize. Use for high-priority labels, featured categories, or primary status indicators that drive core user awareness and engagement.

Secondary

Secondary importance styling for notable but less critical information than primary badges. Use for supplementary labels, alternative categories, or when providing additional context alongside primary information.

Neutral

Neutral styling variant for informational labels with minimal urgency or priority. Use when maintaining visual hierarchy while providing functional information access without demanding immediate attention.

Danger

Critical status styling that signals errors, warnings, or problematic conditions. Use for error states, critical alerts, failed statuses, or any labeling that requires immediate user attention and indicates issues.

Success

Positive confirmation styling for completion and success states. Use for successful operations, completed statuses, positive indicators, or any labeling that confirms successful outcomes and achievements.

Warning

Cautionary styling variant that signals attention-required situations or potential concerns. Use for warning states, pending conditions, approaching limits, or labels that require user awareness and possible action.

Info

Informational styling variant for knowledge-based content and helpful guidance. Use for informational labels, helpful tips, feature explanations, or labels that provide valuable context and learning opportunities.

Black

High-contrast styling variant that maintains black appearance regardless of theme. Use for maximum visual impact in special contexts or when consistent dark styling is required across theme variations for critical labeling.

White

Clean contrast styling variant that maintains white appearance regardless of theme. Use for prominent labels requiring neutral treatment in special contexts or when consistent light styling is needed across theme variations.

Size Variants

Different dimensional scales for badge components to accommodate various layout requirements and visual hierarchies. These variants maintain proportional relationships while adapting to different design contexts and space constraints.

Large

Expanded badge size designed for high-visibility labeling requiring more emphasis, such as important status indicators or primary categorical information. Use for prominent labels in hero sections, mobile interfaces, or when enhanced prominence is required.

Medium

Standard badge size providing balanced proportions for most badge implementations. Use as the default size for primary and secondary labels across general interface contexts where optimal visibility and readability are required.

Small

Compact badge size optimized for dense layouts and secondary labeling. Use in constrained spaces, inline content, or when multiple badges need to fit within limited screen real estate.