BadgeNew

Import

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>

Usage

import {Avatar, Badge} from "@heroui/react";

const GREEN_AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";
const ORANGE_AVATAR_URL =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg";

Colors

import {Avatar, Badge} from "@heroui/react";

const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";

export function BadgeColors() {

Sizes

import {Avatar, Badge} from "@heroui/react";

const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";

export function BadgeSizes() {

Variants

import {Avatar, Badge, Separator} from "@heroui/react";
import React from "react";

const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";

Placements

import {Avatar, Badge} from "@heroui/react";

const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";

export function BadgePlacements() {

With Content

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

import {Bell} from "@gravity-ui/icons";
import {Avatar, Badge} from "@heroui/react";

const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";

Dot Badge

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

import {Avatar, Badge} from "@heroui/react";

const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";

export function BadgeDot() {

Styling

Passing Tailwind CSS classes

You can style the root container and individual slots:

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

function CustomBadge() {
  return (
    <Badge.Anchor>
      <Avatar />
      <Badge className="border-2 border-white" color="danger">
        <Badge.Label className="font-bold">99+</Badge.Label>
      </Badge>
    </Badge.Anchor>
  );
}

Customizing the component classes

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;
  }
}

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 Props

Badge.Anchor Props

Badge.Label Props