Badge

Import

import { Badge } from '@blakeui/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 "@blakeui/react";

const GREEN_AVATAR_URL = "https://cdn.blakeui.com/avatars/green.jpg";
const ORANGE_AVATAR_URL = "https://cdn.blakeui.com/avatars/orange.jpg";
const BLUE_AVATAR_URL = "https://cdn.blakeui.com/avatars/blue.jpg";

Colors

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

const AVATAR_URL = "https://cdn.blakeui.com/avatars/green.jpg";

export function BadgeColors() {

Sizes

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

const AVATAR_URL = "https://cdn.blakeui.com/avatars/green.jpg";

export function BadgeSizes() {

Variants

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

const AVATAR_URL = "https://cdn.blakeui.com/avatars/green.jpg";

Placements

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

const AVATAR_URL = "https://cdn.blakeui.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 {Avatar, Badge} from "@blakeui/react";
import {Bell} from "@gravity-ui/icons";

const AVATAR_URL = "https://cdn.blakeui.com/avatars/green.jpg";

Dot Badge

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

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

const AVATAR_URL = "https://cdn.blakeui.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 '@blakeui/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.

A worked example is in Styling.

blakeUI 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