Badge

Pro

shadcn's badge in Candor's theme.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/badge

Brings in: render-prop, utils · npm: class-variance-authority@^0.7.1, radix-ui@^1.8.1

Usage

TSX · The example above

"use client"

import { Check, LoaderCircle, TriangleAlert } from "lucide-react"
import { Badge } from "@/components/ui/badge"

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="destructive">Production</Badge>
      <Badge variant="outline">Staging</Badge>
      <Badge variant="running">
        <LoaderCircle aria-hidden className="animate-spin" /> Migrating
      </Badge>
      <Badge variant="success">
        <Check aria-hidden /> Tests passed
      </Badge>
      <Badge variant="warning">
        <TriangleAlert aria-hidden /> Needs approval
      </Badge>
      <Badge variant="secondary">3 flags</Badge>
    </div>
  )
}

<Badge>

Prop	Type	Default	Description
asChild	`boolean \| undefined`	—	Renders its child element with the badge's styles instead of a span.

Also takes the props of React.ComponentProps<"span">VariantProps<typeof badgeVariants>RenderProp.