{"name":"badge","title":"Badge","description":"Displays a badge or a component that looks like a badge.","installCommand":"bunx marko-ui add badge -y","usageTags":"<Badge>","importSnippet":"import Badge from \"@/components/ui/badge/badge.marko\";","usageSnippet":"<Badge variant=\"secondary\">Badge</Badge>","tags":["Badge"],"parts":[],"props":[{"name":"href","type":"string","required":false},{"name":"variant","type":"'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | null | undefined","required":false,"default":"default"}],"events":[],"keyboard":[],"accessibilityNotes":["Renders a plain `<span>` (see `packages/shadcn/ui/badge/badge.marko`) with no implicit ARIA role — it's a visual label, not an interactive control.","A badge conveying status information should not rely on color alone; pair it with text (as in the status examples) so the meaning survives for users who can't perceive color.","When a badge wraps interactive content, such as the link pattern above, the interactive element itself (`<a>`, `<button>`) carries the accessibility semantics and keyboard behavior — the badge only supplies styling."],"examples":[{"id":"badge-default","title":"Default","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\n\n<Badge>Badge</Badge>","description":"A badge with the default variant."},{"id":"badge-demo","title":"Variants","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\n\n<div class=\"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</div>","description":"Use the `variant` prop to change the appearance of the badge."},{"id":"badge-variants","title":"All variants","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\n\n<div class=\"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</div>","description":"Every variant side by side, including `ghost`, which upstream's hero demo omits."},{"id":"badge-status","title":"Status examples","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\n\n<div class=\"flex flex-wrap gap-2\">\n  <Badge>Active</Badge>\n  <Badge variant=\"secondary\">Pending</Badge>\n  <Badge variant=\"destructive\">Failed</Badge>\n  <Badge variant=\"outline\">Draft</Badge>\n</div>","description":"Badges are a common way to surface state, such as the status of a record."},{"id":"badge-icon","title":"With icon","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\n\n<Badge variant=\"secondary\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"20 6 9 17 4 12\"/>\n  </svg>\n  Verified\n</Badge>","description":"Render an icon alongside the badge text. Use `data-icon=\"inline-start\"` to render the icon on the left and `data-icon=\"inline-end\"` to render the icon on the right."},{"id":"badge-spinner","title":"With spinner","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex flex-wrap gap-2\">\n  <Badge variant=\"destructive\">\n    <Spinner data-icon=\"inline-start\"/>\n    Deleting\n  </Badge>\n  <Badge variant=\"secondary\">\n    Generating\n    <Spinner data-icon=\"inline-end\"/>\n  </Badge>\n</div>","description":"Render a spinner inside the badge. Add `data-icon=\"inline-start\"` or `data-icon=\"inline-end\"` to the spinner, same as an icon."},{"id":"badge-link","title":"Link","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<Badge>\n  <a href=\"#link\">\n    Open Link\n    <Icon name=\"ArrowUpRightIcon\" data-icon=\"inline-end\"/>\n  </a>\n</Badge>","description":"Pass `href` and the badge renders as a real `<a>` with the same styling — the Marko equivalent of shadcn's `asChild`. Nesting an `<a>` inside the badge, as this demo does, also works, and the badge's `[a]:hover:` styles already target a child link."},{"id":"badge-numeric","title":"Numeric","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\n\n<div class=\"flex flex-wrap items-center gap-2\">\n  <Badge>8</Badge>\n  <Badge variant=\"destructive\">99+</Badge>\n</div>","description":"Badges also work well for short counts, like unread totals."},{"id":"badge-colors","title":"Custom colors","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\n\n<div class=\"flex flex-wrap gap-2\">\n  <Badge class=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n    Blue\n  </Badge>\n  <Badge class=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n    Green\n  </Badge>\n  <Badge class=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n    Sky\n  </Badge>\n  <Badge class=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n    Purple\n  </Badge>\n  <Badge class=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n    Red\n  </Badge>\n</div>","description":"Customize a badge's colors by adding classes such as `bg-green-50 dark:bg-green-800` directly to the `Badge` component."},{"id":"badge-rtl","title":"RTL","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex w-full flex-wrap justify-center gap-2\" dir=\"rtl\">\n  <Badge>شارة</Badge>\n  <Badge variant=\"secondary\">ثانوي</Badge>\n  <Badge variant=\"destructive\">مدمر</Badge>\n  <Badge variant=\"outline\">مخطط</Badge>\n  <Badge variant=\"secondary\">\n    <Icon name=\"BadgeCheck\" data-icon=\"inline-start\"/>\n    متحقق\n  </Badge>\n  <Badge variant=\"outline\">\n    إشارة مرجعية\n    <Icon name=\"BookmarkIcon\" data-icon=\"inline-end\"/>\n  </Badge>\n</div>","description":"Badge has no directional logic of its own — icon placement and text flow follow the ambient `dir` attribute."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"span"}