Badge

​

Overview

​

Basic Usage

​

Primary Badge

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

​

Success Badge

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

​

Notification Counter

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

​

Custom Color Badge

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

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

HuxBadge(
  label: 'Info',
  variant: HuxBadgeVariant.secondary,
)

• Purpose: Secondary information and states
• Colors: Theme-aware secondary colors
• Use Case: Secondary features, additional info

​

Outline Badge

HuxBadge(
  label: 'Draft',
  variant: HuxBadgeVariant.outline,
)

• Purpose: Subtle indicators with borders
• Colors: Transparent background with borders
• Use Case: Subtle status indicators

​

Success Badge

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

• Purpose: Positive states and confirmations
• Colors: Theme-aware success colors
• Use Case: Completed tasks, positive status

​

Destructive Badge

HuxBadge(
  label: 'Error',
  variant: HuxBadgeVariant.destructive,
)

• Purpose: Errors and critical states
• Colors: Theme-aware destructive colors
• Use Case: Error states, critical warnings

​

Number Badge

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

​

Related Components

• HuxAlert - Message boxes for user feedback
• HuxButton - Action buttons
• HuxAvatar - User profile components