Skip to main content

​
Overview

HuxBadge is a versatile component for displaying status indicators, notification counters, and labels throughout your application. It provides semantic variants for different contexts while maintaining consistent styling and excellent accessibility.

​
Basic Usage

​
Primary Badge

Primary Badge Example 
HuxBadge(
  label: 'New',
  variant: HuxBadgeVariant.primary,
)

​
Success Badge

Success Badge Example 
HuxBadge(
  label: 'Active',
  variant: HuxBadgeVariant.success,
)

​
Notification Counter

Number Badge Example 
HuxBadge(
  label: '5',
  variant: HuxBadgeVariant.number,
)

​
Custom Color Badge

Custom Badge Example 
HuxBadge(
  label: 'Custom',
  customColor: Colors.purple,
)

​
Properties

​
Core Properties

  • label - Text content displayed in the badge
  • variant - Visual style variant
  • size - Badge size (small, medium, large)

​
Customization Properties

  • customColor - Custom background color (overrides variant)

​
Variants

​
Primary Badge

Main actions and primary states with theme-aware primary colors. Primary Badge Variant 
HuxBadge(
  label: 'New',
  variant: HuxBadgeVariant.primary,
)
  • Purpose: Main actions and primary states
  • Colors: Theme-aware primary colors
  • Use Case: Main features, primary actions

​
Secondary Badge

Secondary information and states with theme-aware secondary colors. Secondary Badge Variant 
HuxBadge(
  label: 'Info',
  variant: HuxBadgeVariant.secondary,
)
  • Purpose: Secondary information and states
  • Colors: Theme-aware secondary colors
  • Use Case: Secondary features, additional info

​
Outline Badge

Subtle indicators with transparent background and borders. Outline Badge Variant 
HuxBadge(
  label: 'Draft',
  variant: HuxBadgeVariant.outline,
)
  • Purpose: Subtle indicators with borders
  • Colors: Transparent background with borders
  • Use Case: Subtle status indicators

​
Success Badge

Positive states and confirmations with theme-aware success colors. Success Badge Variant 
HuxBadge(
  label: 'Active',
  variant: HuxBadgeVariant.success,
)
  • Purpose: Positive states and confirmations
  • Colors: Theme-aware success colors
  • Use Case: Completed tasks, positive status

​
Destructive Badge

Errors and critical states with theme-aware destructive colors. Destructive Badge Variant 
HuxBadge(
  label: 'Error',
  variant: HuxBadgeVariant.destructive,
)
  • Purpose: Errors and critical states
  • Colors: Theme-aware destructive colors
  • Use Case: Error states, critical warnings

​
Number Badge

Notification counters and numbers with theme-aware number colors. Number Badge Variant 
HuxBadge(
  label: '5',
  variant: HuxBadgeVariant.number,
)
  • Purpose: Notification counters and numbers
  • Colors: Theme-aware number colors
  • Use Case: Notification counts, item quantities

​
Size Variants

​
Small Badge

  • Height: 20px
  • Font Size: 11px
  • Horizontal Padding: 8px
  • Vertical Padding: 4px
HuxBadge(
  label: 'New',
  variant: HuxBadgeVariant.primary,
  size: HuxBadgeSize.small,
)

​
Medium Badge ⭐ Default

  • Height: 24px
  • Font Size: 12px
  • Horizontal Padding: 12px
  • Vertical Padding: 6px
HuxBadge(
  label: 'Info',
  variant: HuxBadgeVariant.secondary,
  size: HuxBadgeSize.medium,
)

​
Large Badge

  • Height: 28px
  • Font Size: 14px
  • Horizontal Padding: 16px
  • Vertical Padding: 8px
HuxBadge(
  label: 'Active',
  variant: HuxBadgeVariant.success,
  size: HuxBadgeSize.large,
)

​
Styling & Colors

​
Background Colors

  • Primary: HuxTokens.primary(context)
  • Secondary: HuxTokens.buttonSecondaryBackground(context)
  • Success: HuxTokens.surfaceSuccess(context)
  • Destructive: HuxTokens.surfaceDestructive(context)
  • Custom: User-defined color

​
Text Colors

  • Primary: Auto-calculated for optimal contrast
  • Secondary: HuxTokens.buttonSecondaryText(context)
  • Success: HuxTokens.textSuccess(context)
  • Destructive: HuxTokens.textDestructive(context)
  • Custom: Auto-calculated for optimal contrast

​
Border Colors

  • Primary: HuxTokens.borderSecondary(context)
  • Secondary: HuxTokens.buttonSecondaryBorder(context)
  • Success: HuxTokens.borderSecondary(context)
  • Destructive: HuxTokens.borderSecondary(context)
  • Custom: User-defined color

​
States

​
Default State

  • Fully visible with normal styling
  • Proper contrast and readability
  • Interactive and accessible

​
Custom Color State

  • User-defined background color
  • Automatically calculated text color
  • Maintains accessibility standards

​
Accessibility

​
Screen Reader Support

  • Proper semantic labeling
  • Variant announcements
  • Content descriptions

​
Visual Design

  • High contrast ratios
  • Clear visual hierarchy
  • Consistent sizing

​
Touch Targets

  • Appropriate sizing for mobile
  • Clear visual feedback
  • Proper spacing

​
Examples

Status Indicators

See HuxBadge in different contexts

Notification Counters

Badge usage for notifications
⌘I