{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon-badge",
  "title": "Icon badge",
  "description": "icon button with unread count/dot · always labelled",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/icon-badge.tsx",
      "content": "import { cn } from 'cn';\nimport type { LucideIcon } from 'lucide-react';\nimport type * as React from 'react';\n\ntype Props = Omit<React.ComponentProps<'button'>, 'children'> & {\n  icon: LucideIcon;\n  /** Number shown in the badge; 0 hides it. Values over 99 show \"99+\". */\n  count?: number;\n  /** Show a plain dot instead of a count. */\n  dot?: boolean;\n  /** Names the button (\"Notifications\"). The count is added for screen readers. */\n  'aria-label': string;\n};\n\n/** Icon button with a notification badge (bell, cart, inbox). Always give it a label. */\nexport function IconBadge({ icon: Icon, count = 0, dot, className, type = 'button', ...props }: Props) {\n  const showCount = !dot && count > 0;\n  const label = showCount ? `${props['aria-label']}, ${count} new` : props['aria-label'];\n  return (\n    <button\n      type={type}\n      {...props}\n      aria-label={label}\n      className={cn(\n        'focus-visible:ring-ring/50 hover:bg-accent relative inline-flex size-10 items-center justify-center rounded-md transition-colors outline-none focus-visible:ring-[3px]',\n        className\n      )}>\n      <Icon className=\"size-5\" aria-hidden />\n      {dot ? <span aria-hidden className=\"bg-destructive border-background absolute top-1.5 right-1.5 size-2.5 rounded-full border-2\" /> : null}\n      {showCount ? (\n        <span\n          aria-hidden\n          className=\"bg-destructive text-destructive-foreground border-background absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full border-2 px-1 text-[10px] leading-none font-bold tabular-nums\">\n          {count > 99 ? '99+' : count}\n        </span>\n      ) : null}\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/icon-badge.tsx"
    }
  ],
  "meta": {
    "exports": [
      "IconBadge"
    ],
    "api": "<IconBadge icon count? dot? aria-label onClick? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "actions"
  ],
  "type": "registry:component"
}