Badge

Status labels with colored dots, removable tags that slide closed and counts that roll to their new value.

Used in Pro blocks: Code Block, Subagents, Thinking, and 8 more

PendingIn progressIn reviewFailedSuccessExpired

import {
  IconAlertTriangle,
  IconCircleCheck,
  IconCircleX,
  IconClock,
  IconEye,
  IconLoader2,
} from "@tabler/icons-react"

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

export function BadgeDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge variant="warning">
        <IconAlertTriangle data-icon="inline-start" />
        Pending
      </Badge>
      <Badge variant="info">
        <IconLoader2 data-icon="inline-start" />
        In progress
      </Badge>
      <Badge variant="warning">
        <IconEye data-icon="inline-start" />
        In review
      </Badge>
      <Badge variant="destructive">
        <IconCircleX data-icon="inline-start" />
        Failed
      </Badge>
      <Badge variant="success">
        <IconCircleCheck data-icon="inline-start" />
        Success
      </Badge>
      <Badge>
        <IconClock data-icon="inline-start" />
        Expired
      </Badge>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/badge.json

Adds the component, the HextaUI theme tokens and any HextaUI components it depends on.

Add the theme tokens to your global CSS, if you haven’t yet.

Install the dependencies.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

Copy and paste the following code into your project.

components/ui/badge.tsx

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { IconX } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/number-flow.tsx

"use client"

import * as React from "react"
import { cn } from "cn"

import { easeSpring } from "@/lib/motion"

type NumberFlowTrend = "auto" | "up" | "down" | "shortest"

lib/motion.ts

import * as React from "react"

const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"
const easeInOut = "cubic-bezier(0.77, 0, 0.175, 1)"
const easeSpring =
  "linear(0, 0.015 2%, 0.0532 4%, 0.1065 6%, 0.1686 8%, 0.2351 10%, 0.3363 13%, 0.4332 16%, 0.5495 20%, 0.648 24%, 0.7287 28%, 0.807 33%, 0.8646 38%, 0.9128 44%, 0.9447 50%, 0.968 57%, 0.9834 65%, 0.9924 74%, 0.9975 85%, 1)"

const duration = {

Update the import paths to match your project setup.

Usage

import {
  Badge,
  BadgeClose,
  BadgeCount,
  BadgeDot,
} from "@/components/ui/badge"

<Badge variant="success">
  <BadgeDot />
  Paid
</Badge>

Composition

Badge
├── BadgeDot
├── BadgeCount
└── BadgeClose

The default outline appearance keeps a neutral surface and puts the status color on the dot or icon. Use appearance="solid" when the badge needs to stand out, or appearance="muted" for a quiet filled chip. shape="pill" rounds it fully.

import { Badge, BadgeDot } from "@/components/ui/badge"

export function BadgeVariants() {
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge>
          <BadgeDot />
          Draft
        </Badge>
        <Badge variant="success">
          <BadgeDot />
          Paid
        </Badge>
        <Badge variant="info">
          <BadgeDot />
          Syncing
        </Badge>
        <Badge variant="warning">
          <BadgeDot />
          Pending
        </Badge>
        <Badge variant="destructive">
          <BadgeDot />
          Failed
        </Badge>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge appearance="solid">Draft</Badge>
        <Badge appearance="solid" variant="success">
          Paid
        </Badge>
        <Badge appearance="solid" variant="info">
          Syncing
        </Badge>
        <Badge appearance="solid" variant="warning">
          Pending
        </Badge>
        <Badge appearance="solid" variant="destructive">
          Failed
        </Badge>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge appearance="muted">Draft</Badge>
        <Badge appearance="muted" shape="pill">
          nngroup.com
        </Badge>
        <Badge appearance="muted" shape="pill" variant="info">
          <BadgeDot />
          Syncing
        </Badge>
      </div>
    </div>
  )
}

Sizes

Open example

sm, default and lg. Icons, dots, the close button and counts scale with the badge.

import { IconCheck } from "@tabler/icons-react"

import { Badge, BadgeClose, BadgeCount, BadgeDot } from "@/components/ui/badge"

export function BadgeSizes() {
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge size="sm">Small</Badge>
        <Badge size="sm" variant="success">
          <IconCheck data-icon="inline-start" />
          Paid
        </Badge>
        <Badge size="sm" variant="info">
          <BadgeDot pulse />
          Live
        </Badge>
        <Badge size="sm">
          design
          <BadgeClose />
        </Badge>
        <Badge size="sm">
          <BadgeCount value={42} />
        </Badge>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge>Default</Badge>
        <Badge variant="success">
          <IconCheck data-icon="inline-start" />
          Paid
        </Badge>
        <Badge variant="info">
          <BadgeDot pulse />
          Live
        </Badge>
        <Badge>
          design
          <BadgeClose />
        </Badge>
        <Badge>
          <BadgeCount value={42} />
        </Badge>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge size="lg">Large</Badge>
        <Badge size="lg" variant="success">
          <IconCheck data-icon="inline-start" />
          Paid
        </Badge>
        <Badge size="lg" variant="info">
          <BadgeDot pulse />
          Live
        </Badge>
        <Badge size="lg">
          design
          <BadgeClose />
        </Badge>
        <Badge size="lg">
          <BadgeCount value={42} />
        </Badge>
      </div>
    </div>
  )
}

Removable

Open example

Add a <BadgeClose /> to make a badge removable. It shrinks closed and its neighbours slide into the gap, then focus moves to the next close button. Remove the item from your data in onOpenChangeComplete so the exit animation can finish first.

"use client"

import * as React from "react"

import { Badge, BadgeClose } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

const initialTags = [
  "design",
  "engineering",
  "research",
  "marketing",
  "customer-success",
  "ops",
]

export function BadgeRemovable() {
  const [tags, setTags] = React.useState(initialTags)
  const [next, setNext] = React.useState(1)

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        {tags.map((tag) => (
          <Badge
            key={tag}
            onOpenChangeComplete={(open) => {
              if (!open) {
                setTags((current) => current.filter((item) => item !== tag))
              }
            }}
          >
            {tag}
            <BadgeClose />
          </Badge>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setTags((current) => [...current, `tag-${next}`])
            setNext((value) => value + 1)
          }}
        >
          Add tag
        </Button>
        <Button variant="ghost" size="sm" onClick={() => setTags(initialTags)}>
          Reset
        </Button>
      </div>
    </div>
  )
}

Controlled

Open example

Pass open and onOpenChange to own the visibility. Setting open back to true brings the badge back with an enter animation.

"use client"

import * as React from "react"

import { Badge, BadgeClose } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeControlled() {
  const [open, setOpen] = React.useState(true)

  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge variant="warning" open={open} onOpenChange={setOpen}>
        Beta features on
        <BadgeClose />
      </Badge>
      <Button
        variant="outline"
        size="sm"
        disabled={open}
        onClick={() => setOpen(true)}
      >
        Restore
      </Button>
    </div>
  )
}

Counts

Open example

<BadgeCount /> rolls only the digits that change, and caps at max (99 by default) with a plus sign. Screen readers always hear the real number.

"use client"

import * as React from "react"
import { IconInbox } from "@tabler/icons-react"

import { Badge, BadgeCount } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeCounts() {
  const [count, setCount] = React.useState(9)

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge appearance="solid" variant="destructive">
          <BadgeCount value={count} />
        </Badge>
        <Badge>
          <BadgeCount value={count} max={999} />
          unread
        </Badge>
        <Button variant="outline">
          <IconInbox />
          Inbox
          <Badge size="sm">
            <BadgeCount value={count} />
          </Badge>
        </Button>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCount((value) => value + 1)}
        >
          +1
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCount((value) => Math.max(0, value - 1))}
        >
          −1
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCount((value) => value + 10)}
        >
          +10
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setCount(Math.floor(Math.random() * 1200))}
        >
          Random
        </Button>
      </div>
    </div>
  )
}

Interactive

Open example

Use render to make a badge a link or a button. It gains a hover tint, a press scale and a focus ring. aria-invalid shows the error state.

import { IconArrowUpRight, IconX } from "@tabler/icons-react"

import { Badge, BadgeDot } from "@/components/ui/badge"

export function BadgeInteractive() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge render={<a href="#changelog" />}>
        v2.0 is out
        <IconArrowUpRight data-icon="inline-end" />
      </Badge>
      <Badge render={<button type="button" />} variant="info">
        <BadgeDot />
        Filter: open
      </Badge>
      <Badge render={<a href="#new" />}>New</Badge>
      <Badge render={<button type="button" />} aria-invalid>
        <IconX data-icon="inline-start" />
        Invalid
      </Badge>
    </div>
  )
}

Long content

Open example

A badge never grows wider than its container. Long labels truncate with an ellipsis while icons and the close button stay visible.

import { IconCheck } from "@tabler/icons-react"

import { Badge, BadgeClose } from "@/components/ui/badge"

export function BadgeLongContent() {
  return (
    <div className="flex w-56 max-w-full flex-col items-start gap-2">
      <Badge>
        SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
      </Badge>
      <Badge variant="success">
        <IconCheck data-icon="inline-start" />
        [email protected]
        <BadgeClose />
      </Badge>
    </div>
  )
}

Right to left

Open example

Icons, the close button and the collapse animation follow the reading direction. Counts always read left to right.

import { IconCheck } from "@tabler/icons-react"

import { Badge, BadgeClose, BadgeCount, BadgeDot } from "@/components/ui/badge"

export function BadgeRtl() {
  return (
    <div dir="rtl" className="flex flex-wrap items-center justify-center gap-2">
      <Badge variant="success">
        <IconCheck data-icon="inline-start" />
        مدفوع
      </Badge>
      <Badge>
        <BadgeDot pulse />
        مباشر
      </Badge>
      <Badge>
        تصميم
        <BadgeClose />
      </Badge>
      <Badge>
        <BadgeCount value={120} />
      </Badge>
    </div>
  )
}

Keyboard

These keys apply to <BadgeClose />.

Key	Action
`EnterSpace`	Removes the badge.
`BackspaceDelete`	Removes the badge.
`Tab`	Moves to the next close button. After a removal, focus lands on the next close button, or the previous one when it was the last.

Accessibility

The close button is named after the badge, so a screen reader announces “Remove design” rather than a bare “Remove”. Pass aria-label to override it.
<BadgeDot /> is decorative and hidden from assistive tech. Keep the status in the text label.
<BadgeCount /> exposes the exact value even when the visible text is capped, like 99+.
The removal and count animations are skipped when reduced motion is on.

API reference

<Badge /> renders a <span> and accepts all of its attributes.

Badge

Prop	Type	Default
`variant`Colors the dot and icons in outline, or the surface in solid.	`"default" \| "success" \| "info" \| "warning" \| "destructive"`	`"default"`
`appearance`	`"outline" \| "solid" \| "muted"`	`"outline"`
`shape`	`"default" \| "pill"`	`"default"`
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`open`Controlled visibility.	`boolean`	`–`
`defaultOpen`	`boolean`	`true`
`onOpenChange`Called when BadgeClose is activated.	`(open: boolean) => void`	`–`
`onOpenChangeComplete`Called after the exit animation finishes. Remove the item from your data here.	`(open: boolean) => void`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<span>`

Attribute	Description
`data-slot="badge"`	Target badges in CSS.
`data-variant`	The current variant.
`data-appearance`	The current appearance.
`data-shape`	The current shape.
`data-size`	The current size.
`data-ending-style`	Present while the badge animates out.
`--badge-accent`	The status color used by dots and icons. Override it for a custom accent.
`--badge-height`	The badge height.
`--badge-radius`	The corner radius. The close button derives its own radius from it.

BadgeDot

Prop	Type	Default
`pulse`Adds a ping animation for live states. Off when reduced motion is on.	`boolean`	`false`

Attribute	Description
`data-slot="badge-dot"`	Target dots in CSS.
`data-pulse`	Present when pulse is on.

BadgeClose

Prop	Type	Default
`children`	`ReactNode`	`<IconX />`
`aria-label`Overrides the automatic “Remove {label}” name.	`string`	`–`
`onClick`Call event.preventDefault() to keep the badge open.	`(event) => void`	`–`

Attribute	Description
`data-slot="badge-close"`	Target the close button in CSS.

BadgeCount

Prop	Type	Default
`value`Negative and non-finite values show 0.	`number`	`–`
`max`Values above it show as max+. Pass Infinity for no cap.	`number`	`99`
`duration`	`number`	`600`
`animated`	`boolean`	`true`
`trend`The direction the digits spin.	`"auto" \| "up" \| "down" \| "shortest"`	`"auto"`
`locales`	`Intl.LocalesArgument`	`–`
`format`	`Intl.NumberFormatOptions`	`–`

Attribute	Description
`data-slot="badge-count"`	Target counts in CSS.

Used in Pro blocks

Blocks that build on Badge.

Every block comes with HextaUI Pro, and Prompt Input is free.

Badge

Installation

Usage

Composition

Examples

Variants and appearances

Sizes

Removable

Controlled

Counts

Interactive

Long content

Right to left

Keyboard

Accessibility

API reference

Badge

BadgeDot

BadgeClose

BadgeCount

Used in Pro blocks