Badge

Usage

import { Badge } from '@heroui/react';

Anatomy

Badge is designed to be positioned relative to another element using Badge.Anchor. Plain-text children are automatically wrapped in <Badge.Label>.

For standalone label usage, use the Chip component instead.

<Badge.Anchor>
  <Avatar />
  <Badge color="danger">5</Badge>
</Badge.Anchor>

Examples

Variants

Sizes

Colors

Placements

Dot Badge

Empty badges act as status indicators — useful for online/offline states or activity signals.

With Content

Badge supports text, numbers, and icons as content. When no children are provided, it renders as a dot indicator.

Customization

Tailwind CSS

Global CSS

To customize the Badge component classes, you can use the @layer components directive. Learn more.

@layer components {
  .badge {
    @apply rounded-full text-xs;
  }

  .badge__label {
    @apply font-semibold;
  }

  .badge--accent {
    @apply shadow-sm;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Badge component uses these CSS classes (View source styles):

Base Classes

• .badge - Base badge container styles
• .badge__label - Label text slot styles
• .badge-anchor - Positioning wrapper for the anchored element

Color Classes

• .badge--accent - Accent color variant
• .badge--danger - Danger color variant
• .badge--default - Default color variant
• .badge--success - Success color variant
• .badge--warning - Warning color variant

Variant Classes

• .badge--primary - Primary variant with filled background
• .badge--secondary - Secondary variant with default background
• .badge--soft - Soft variant with lighter background

Size Classes

• .badge--sm - Small size
• .badge--md - Medium size (default)
• .badge--lg - Large size

Placement Classes

• .badge--top-right - Position at top-right corner (default)
• .badge--top-left - Position at top-left corner
• .badge--bottom-right - Position at bottom-right corner
• .badge--bottom-left - Position at bottom-left corner

Compound Variant Classes

Badges support combining variant and color classes (e.g., .badge--primary.badge--accent). The following combinations have default styles defined:

Primary Variants:

• .badge--primary.badge--accent - Primary accent with filled background
• .badge--primary.badge--default - Primary default with filled background
• .badge--primary.badge--success - Primary success with filled background
• .badge--primary.badge--warning - Primary warning with filled background
• .badge--primary.badge--danger - Primary danger with filled background

Soft Variants:

• .badge--soft.badge--accent - Soft accent with lighter background
• .badge--soft.badge--default - Soft default with lighter background
• .badge--soft.badge--success - Soft success with lighter background
• .badge--soft.badge--warning - Soft warning with lighter background
• .badge--soft.badge--danger - Soft danger with lighter background

API Reference

Badge

Badge.Anchor

Badge.Label

Related Components