badge-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-example",
  "title": "Badge",
  "registryDependencies": [
    "badge",
    "spinner",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-mira/examples/badge-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}