Badge

Installation

$ npx shadcn@latest add https://goodui.dev/r/badge.json

The file lands in components/goodui/badge.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/badge works too.

Usage

import { Check, Clock } from "lucide-react"
import { Badge } from "@/components/goodui/badge"

const bookings = [
  { client: "Maya Chen", time: "09:30", status: "Confirmed" },
  { client: "Leo Park", time: "11:00", status: "Pending" },
  { client: "Ana Ruiz", time: "13:15", status: "No-show" },
] as const

const tone = { Confirmed: "success", Pending: "warning", "No-show": "danger" } as const

export function TodayBookings() {
  return (
    <ul className="divide-y rounded-lg border">
      {bookings.map((b) => (
        <li key={b.client} className="flex items-center justify-between px-4 py-3 text-sm">
          <span>
            {b.time} · {b.client}
          </span>
          <Badge tone={tone[b.status]} icon={b.status === "Confirmed" ? <Check /> : b.status === "Pending" ? <Clock /> : undefined}>
            {b.status}
          </Badge>
        </li>
      ))}
    </ul>
  )
}

When to use

Examples

const [tags, setTags] = React.useState(["Haircut", "Color", "VIP"])

<div className="flex flex-wrap gap-1.5">
  {tags.map((t) => (
    <Badge key={t} variant="outline" tone="neutral" removable onRemove={() => setTags((all) => all.filter((x) => x !== t))}>
      {t}
    </Badge>
  ))}
</div>

const [active, setActive] = React.useState<string[]>(["Paid"])
const toggle = (f: string) => setActive((a) => (a.includes(f) ? a.filter((x) => x !== f) : [...a, f]))

{["Today", "Paid", "Walk-ins"].map((f) => (
  <Badge key={f} clickable size="md" variant={active.includes(f) ? "solid" : "outline"} aria-pressed={active.includes(f)} onClick={() => toggle(f)}>
    {f}
  </Badge>
))}

<Badge variant="solid" tone="danger" size="xs" animation="count" max={99}>
  {unread}
</Badge>

API reference

Accessibility

• •A plain badge is a <span>; clickable renders a real <button type="button">, so add aria-pressed yourself when it toggles a filter.
• •The × button has aria-label "Remove" (change it with labels.remove). Inside a clickable badge it becomes a focusable role="button" span, since buttons cannot nest; when the badge is disabled that span leaves the tab order and ignores clicks and keys.
• •Icons and the status dot are aria-hidden; the text carries the meaning, so do not rely on the tone color alone.
• •disabled dims the badge and disables its <button> (the clickable badge, or the × on a plain badge).

Motion

• •pulse: a copy of the dot scales to 2.6× and fades, every 1.6 s. Without variant="dot" or an icon, a dot is added in front of the text.
• •shine: a light sweeps across the badge every 3 s. bounce-in: scales in from 0.3 with overshoot in 500 ms, once on mount.
• •count: when the text or number changes, the badge pops from 1.18× and the new value slides up in 380 ms. Never on first render.
• •Remove: the badge scales to 0.6 and fades out in 180 ms, then onRemove fires. Clickable badges scale to 0.96 on press (neo badges shift into their shadow).
• •Reduced motion: every animation and transition is off, the pulse ring and shine are hidden, and remove happens instantly.

• •All animations are CSS keyframes on transform and opacity, shipped once through a shared <style> tag. No JavaScript runs per frame.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related