Badge

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/components/example"
5import { Badge } from "@/registry/bases/radix/ui/badge"
6import { Spinner } from "@/registry/bases/radix/ui/spinner"
7import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
8 
9export default function BadgeExample() {
10  return (
11    <ExampleWrapper className="lg:grid-cols-1">
12      <BadgeVariants />
13      <BadgeWithIconLeft />
14      <BadgeWithIconRight />
15      <BadgeWithSpinner />
16      <BadgeAsLink />
17      <BadgeLongText />
18      <BadgeCustomColors />
19    </ExampleWrapper>
20  )
21}
22 
23function BadgeVariants() {
24  return (
25    <Example title="Variants">
26      <div className="flex flex-wrap gap-2">
27        <Badge>Default</Badge>
28        <Badge variant="secondary">Secondary</Badge>
29        <Badge variant="destructive">Destructive</Badge>
30        <Badge variant="outline">Outline</Badge>
31        <Badge variant="ghost">Ghost</Badge>
32        <Badge variant="link">Link</Badge>
33      </div>
34    </Example>
35  )
36}
37 
38function BadgeWithIconLeft() {
39  return (
40    <Example title="Icon Left" className="max-w-fit">
41      <div className="flex flex-wrap gap-2">
42        <Badge>
43          <IconPlaceholder
44            lucide="BadgeCheck"
45            tabler="IconRosetteDiscountCheck"
46            hugeicons="CheckmarkBadge02Icon"
47            phosphor="CheckCircleIcon"
48            data-icon="inline-start"
49          />
50          Default
51        </Badge>
52        <Badge variant="secondary">
53          <IconPlaceholder
54            lucide="BadgeCheck"
55            tabler="IconRosetteDiscountCheck"
56            hugeicons="CheckmarkBadge02Icon"
57            phosphor="CheckCircleIcon"
58            data-icon="inline-start"
59          />
60          Secondary
61        </Badge>
62        <Badge variant="destructive">
63          <IconPlaceholder
64            lucide="BadgeCheck"
65            tabler="IconRosetteDiscountCheck"
66            hugeicons="CheckmarkBadge02Icon"
67            phosphor="CheckCircleIcon"
68            data-icon="inline-start"
69          />
70          Destructive
71        </Badge>
72        <Badge variant="outline">
73          <IconPlaceholder
74            lucide="BadgeCheck"
75            tabler="IconRosetteDiscountCheck"
76            hugeicons="CheckmarkBadge02Icon"
77            phosphor="CheckCircleIcon"
78            data-icon="inline-start"
79          />
80          Outline
81        </Badge>
82        <Badge variant="ghost">
83          <IconPlaceholder
84            lucide="BadgeCheck"
85// … truncated