Badge

A small count or status descriptor for UI elements.

Default

The default badge is filled with the primary color.

Badge

tsx

import { Badge } from "@hummingbirdui/react";

export default function BadgeDefault() {
  return <Badge>Badge</Badge>;
}

Variants

The variant prop changes the visual style: filled (default), subtle, or outline.

FilledSubtleOutline

tsx

import { Badge } from "@hummingbirdui/react";

export default function BadgeVariants() {
  return (
    <div className="flex items-center gap-2">
      <Badge variant="filled">Filled</Badge>
      <Badge variant="subtle">Subtle</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Colors

The color prop conveys intent with primary (default), neutral, secondary, info, success, warning, or danger.

NeutralPrimarySecondaryInfoSuccessWarningDanger

tsx

import { Badge } from "@hummingbirdui/react";

export default function BadgeColors() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge color="neutral">Neutral</Badge>
      <Badge color="primary">Primary</Badge>
      <Badge color="secondary">Secondary</Badge>
      <Badge color="info">Info</Badge>
      <Badge color="success">Success</Badge>
      <Badge color="warning">Warning</Badge>
      <Badge color="danger">Danger</Badge>
    </div>
  );
}

Sizes

The size prop offers three sizes: sm (default), md, and lg.

SmallMediumLarge

tsx

import { Badge } from "@hummingbirdui/react";

export default function BadgeSizes() {
  return (
    <div className="flex items-center gap-2">
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
      <Badge size="lg">Large</Badge>
    </div>
  );
}

Link

The link prop styles the badge as an interactive link.

Link badge

tsx

import { Badge } from "@hummingbirdui/react";

export default function BadgeLink() {
  return (
    <Badge link asChild>
      <a href="#">Link badge</a>
    </Badge>
  );
}

With action button

BadgeActionButton adds a trailing button.

Dismissible

tsx

import { Badge, BadgeActionButton } from "@hummingbirdui/react";
import { X } from "lucide-react";

export default function BadgeWithAction() {
  return (
    <Badge color="primary">
      Dismissible
      <BadgeActionButton aria-label="Remove">
        <X className="size-3" />
      </BadgeActionButton>
    </Badge>
  );
}

API Reference

Badge

Prop	Type	Default	Description
variant	`"filled" \| "subtle" \| "outline"`	`"filled"`	Visual style of the badge.
color	`"neutral" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger"`	`"primary"`	Color theme of the badge.
size	`"sm" \| "md" \| "lg"`	`"sm"`	Size of the badge.
link	`boolean`	`false`	Style the badge as an interactive link.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

BadgeActionButton

Prop	Type	Default	Description
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

Styling

Hummingbird React badge is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available badge classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousAvatar NextBreadcrumb