Badge

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import { Badge } from "@/registry/radix-sera/ui/badge"
6import { Spinner } from "@/registry/radix-sera/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 style-sera:gap-6">
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 style-sera:gap-6">
42        <Badge>
43          <IconPlaceholder
44            lucide="BadgeCheck"
45            tabler="IconRosetteDiscountCheck"
46            hugeicons="CheckmarkBadge02Icon"
47            phosphor="CheckCircleIcon"
48            remixicon="RiCheckboxCircleLine"
49            data-icon="inline-start"
50          />
51          Default
52        </Badge>
53        <Badge variant="secondary">
54          <IconPlaceholder
55            lucide="BadgeCheck"
56            tabler="IconRosetteDiscountCheck"
57            hugeicons="CheckmarkBadge02Icon"
58            phosphor="CheckCircleIcon"
59            remixicon="RiCheckboxCircleLine"
60            data-icon="inline-start"
61          />
62          Secondary
63        </Badge>
64        <Badge variant="destructive">
65          <IconPlaceholder
66            lucide="BadgeCheck"
67            tabler="IconRosetteDiscountCheck"
68            hugeicons="CheckmarkBadge02Icon"
69            phosphor="CheckCircleIcon"
70            remixicon="RiCheckboxCircleLine"
71            data-icon="inline-start"
72          />
73          Destructive
74        </Badge>
75        <Badge variant="outline">
76          <IconPlaceholder
77            lucide="BadgeCheck"
78            tabler="IconRosetteDiscountCheck"
79            hugeicons="CheckmarkBadge02Icon"
80            phosphor="CheckCircleIcon"
81// … truncated