Badge

Displays a badge or a component that looks like a badge.

BadgeSecondaryDestructiveOutline

<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Installation

pnpm dlx cubix@latest add badge --base radix

Usage

Import

import { Badge } from "@/components/cubix/badge"

Example

<Badge variant="default | secondary | destructive | outline | ghost | link">
  Badge
</Badge>

Examples

Variants

Use the variant prop to change the look of the badge.

DefaultSecondaryDestructiveOutlineGhostLink

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>
<Badge variant="link">Link</Badge>

With Icon

Render an icon inside the badge. Use data-icon="inline-start" and data-icon="inline-end" so padding follows reading direction in LTR and RTL.

DefaultDefault

<Badge>
  <BadgeCheckIcon data-icon="inline-start" />
  Default
</Badge>
<Badge variant="secondary">
  Default
  <ArrowRightIcon data-icon="inline-end" />
</Badge>

With Spinner

Render a spinner inside the badge. Add data-icon so padding matches the icon examples.

DeletingGenerating

<Badge variant="destructive">
  <LoaderIcon data-icon="inline-start" className="animate-spin" />
  Deleting
</Badge>
<Badge variant="secondary">
  Generating
  <LoaderIcon data-icon="inline-end" className="animate-spin" />
</Badge>

Link

Use the render prop (Base UI / React Aria) or asChild (Radix) to render a link as a badge.

Link

<Badge
  render={
    <a href="#">
      Link
      <ArrowUpRightIcon data-icon="inline-end" />
    </a>
  }
/>

Custom Colors

Override colors with classes such as bg-green-50 dark:bg-green-950.

BlueGreenSkyPurpleRed

<Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
  Blue
</Badge>
<Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
  Green
</Badge>
<Badge className="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
  Sky
</Badge>
<Badge className="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
  Purple
</Badge>
<Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
  Red
</Badge>

RTL

To enable RTL support, see the Direction guide. Icon padding uses inline-start / inline-end so it stays correct under dir="rtl".

نشانثانویهمخربحاشیهتأیید شدهادامه

<div
  dir="rtl"
  lang="fa"
  className="flex w-full flex-wrap justify-center gap-2"
>
  <Badge>نشان</Badge>
  <Badge variant="secondary">ثانویه</Badge>
  <Badge variant="destructive">مخرب</Badge>
  <Badge variant="outline">حاشیه</Badge>
  <Badge>
    <BadgeCheckIcon data-icon="inline-start" />
    تأیید شده
  </Badge>
  <Badge variant="secondary">
    ادامه
    <ArrowLeftIcon data-icon="inline-end" />
  </Badge>
</div>

API Reference

Note: Put icons and spinners inside the badge and mark them with data-icon so spacing stays correct.

Badge

The control that displays a badge or a component that looks like a badge.

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"default"	The visual style of the badge.
render	React.ReactElement	-	Render the badge as another element, such as a link. On Radix, use asChild instead.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Badge label, optional icon, or spinner.