---
title: 'Badge'
description: 'Status indicators and notification counters with semantic variants'
---

## 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](/images/badge/badge-primary.png)

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

### Success Badge
![Success Badge Example](/images/badge/badge-success.png)

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

### Notification Counter
![Number Badge Example](/images/badge/badge-number.png)

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

### Custom Color Badge
![Custom Badge Example](/images/badge/badge-custom.png)

```dart
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](/images/badge/badge-primary.png)

```dart
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](/images/badge/badge-secondary.png)

```dart
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](/images/badge/badge-outline.png)

```dart
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](/images/badge/badge-success.png)

```dart
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](/images/badge/badge-destructive.png)

```dart
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](/images/badge/badge-number.png)

```dart
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

```dart
HuxBadge(
  label: 'New',
  variant: HuxBadgeVariant.primary,
  size: HuxBadgeSize.small,
)
```

### Medium Badge ⭐ **Default**
- **Height**: 24px
- **Font Size**: 12px
- **Horizontal Padding**: 12px
- **Vertical Padding**: 6px

```dart
HuxBadge(
  label: 'Info',
  variant: HuxBadgeVariant.secondary,
  size: HuxBadgeSize.medium,
)
```

### Large Badge
- **Height**: 28px
- **Font Size**: 14px
- **Horizontal Padding**: 16px
- **Vertical Padding**: 8px

```dart
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

<CardGroup cols={2}>
  <Card
    title="Status Indicators"
    icon="tag"
    href="/examples/status-indicators"
  >
    See HuxBadge in different contexts
  </Card>
  <Card
    title="Notification Counters"
    icon="bell"
    href="/examples/notifications"
  >
    Badge usage for notifications
  </Card>
</CardGroup>

## Related Components

- [HuxAlert](/components/alert) - Message boxes for user feedback
- [HuxButton](/components/buttons) - Action buttons
- [HuxAvatar](/components/avatar) - User profile components
