mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
355 lines
10 KiB
TypeScript
355 lines
10 KiB
TypeScript
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/radix/components/example"
|
|
import { Badge } from "@/registry/bases/radix/ui/badge"
|
|
import { Spinner } from "@/registry/bases/radix/ui/spinner"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function BadgeExample() {
|
|
return (
|
|
<ExampleWrapper className="lg:grid-cols-1">
|
|
<BadgeVariants />
|
|
<BadgeWithIconLeft />
|
|
<BadgeWithIconRight />
|
|
<BadgeWithSpinner />
|
|
<BadgeAsLink />
|
|
<BadgeLongText />
|
|
<BadgeCustomColors />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function BadgeVariants() {
|
|
return (
|
|
<Example title="Variants">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge>Default</Badge>
|
|
<Badge variant="secondary">Secondary</Badge>
|
|
<Badge variant="destructive">Destructive</Badge>
|
|
<Badge variant="outline">Outline</Badge>
|
|
<Badge variant="ghost">Ghost</Badge>
|
|
<Badge variant="link">Link</Badge>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function BadgeWithIconLeft() {
|
|
return (
|
|
<Example title="Icon Left" className="max-w-fit">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge>
|
|
<IconPlaceholder
|
|
lucide="BadgeCheck"
|
|
tabler="IconRosetteDiscountCheck"
|
|
hugeicons="CheckmarkBadge02Icon"
|
|
phosphor="CheckCircleIcon"
|
|
remixicon="RiCheckboxCircleLine"
|
|
data-icon="inline-start"
|
|
/>
|
|
Default
|
|
</Badge>
|
|
<Badge variant="secondary">
|
|
<IconPlaceholder
|
|
lucide="BadgeCheck"
|
|
tabler="IconRosetteDiscountCheck"
|
|
hugeicons="CheckmarkBadge02Icon"
|
|
phosphor="CheckCircleIcon"
|
|
remixicon="RiCheckboxCircleLine"
|
|
data-icon="inline-start"
|
|
/>
|
|
Secondary
|
|
</Badge>
|
|
<Badge variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="BadgeCheck"
|
|
tabler="IconRosetteDiscountCheck"
|
|
hugeicons="CheckmarkBadge02Icon"
|
|
phosphor="CheckCircleIcon"
|
|
remixicon="RiCheckboxCircleLine"
|
|
data-icon="inline-start"
|
|
/>
|
|
Destructive
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
<IconPlaceholder
|
|
lucide="BadgeCheck"
|
|
tabler="IconRosetteDiscountCheck"
|
|
hugeicons="CheckmarkBadge02Icon"
|
|
phosphor="CheckCircleIcon"
|
|
remixicon="RiCheckboxCircleLine"
|
|
data-icon="inline-start"
|
|
/>
|
|
Outline
|
|
</Badge>
|
|
<Badge variant="ghost">
|
|
<IconPlaceholder
|
|
lucide="BadgeCheck"
|
|
tabler="IconRosetteDiscountCheck"
|
|
hugeicons="CheckmarkBadge02Icon"
|
|
phosphor="CheckCircleIcon"
|
|
remixicon="RiCheckboxCircleLine"
|
|
data-icon="inline-start"
|
|
/>
|
|
Ghost
|
|
</Badge>
|
|
<Badge variant="link">
|
|
<IconPlaceholder
|
|
lucide="BadgeCheck"
|
|
tabler="IconRosetteDiscountCheck"
|
|
hugeicons="CheckmarkBadge02Icon"
|
|
phosphor="CheckCircleIcon"
|
|
remixicon="RiCheckboxCircleLine"
|
|
data-icon="inline-start"
|
|
/>
|
|
Link
|
|
</Badge>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function BadgeWithIconRight() {
|
|
return (
|
|
<Example title="Icon Right" className="max-w-fit">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge>
|
|
Default
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight02Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</Badge>
|
|
<Badge variant="secondary">
|
|
Secondary
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight02Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</Badge>
|
|
<Badge variant="destructive">
|
|
Destructive
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight02Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
Outline
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight02Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</Badge>
|
|
<Badge variant="ghost">
|
|
Ghost
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight02Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</Badge>
|
|
<Badge variant="link">
|
|
Link
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight02Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</Badge>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function BadgeWithSpinner() {
|
|
return (
|
|
<Example title="With Spinner" className="max-w-fit">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge>
|
|
<Spinner data-icon="inline-start" />
|
|
Default
|
|
</Badge>
|
|
<Badge variant="secondary">
|
|
<Spinner data-icon="inline-start" />
|
|
Secondary
|
|
</Badge>
|
|
<Badge variant="destructive">
|
|
<Spinner data-icon="inline-start" />
|
|
Destructive
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
<Spinner data-icon="inline-start" />
|
|
Outline
|
|
</Badge>
|
|
<Badge variant="ghost">
|
|
<Spinner data-icon="inline-start" />
|
|
Ghost
|
|
</Badge>
|
|
<Badge variant="link">
|
|
<Spinner data-icon="inline-start" />
|
|
Link
|
|
</Badge>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function BadgeAsLink() {
|
|
return (
|
|
<Example title="asChild">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge asChild>
|
|
<a href="#">
|
|
Link{" "}
|
|
<IconPlaceholder
|
|
lucide="ArrowUpRightIcon"
|
|
tabler="IconArrowUpRight"
|
|
hugeicons="ArrowUpRightIcon"
|
|
phosphor="ArrowUpRightIcon"
|
|
remixicon="RiArrowRightUpLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</a>
|
|
</Badge>
|
|
<Badge asChild variant="secondary">
|
|
<a href="#">
|
|
Link{" "}
|
|
<IconPlaceholder
|
|
lucide="ArrowUpRightIcon"
|
|
tabler="IconArrowUpRight"
|
|
hugeicons="ArrowUpRightIcon"
|
|
phosphor="ArrowUpRightIcon"
|
|
remixicon="RiArrowRightUpLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</a>
|
|
</Badge>
|
|
<Badge asChild variant="destructive">
|
|
<a href="#">
|
|
Link{" "}
|
|
<IconPlaceholder
|
|
lucide="ArrowUpRightIcon"
|
|
tabler="IconArrowUpRight"
|
|
hugeicons="ArrowUpRightIcon"
|
|
phosphor="ArrowUpRightIcon"
|
|
remixicon="RiArrowRightUpLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</a>
|
|
</Badge>
|
|
<Badge asChild variant="outline">
|
|
<a href="#">
|
|
Link{" "}
|
|
<IconPlaceholder
|
|
lucide="ArrowUpRightIcon"
|
|
tabler="IconArrowUpRight"
|
|
hugeicons="ArrowUpRightIcon"
|
|
phosphor="ArrowUpRightIcon"
|
|
remixicon="RiArrowRightUpLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</a>
|
|
</Badge>
|
|
<Badge asChild variant="ghost">
|
|
<a href="#">
|
|
Link{" "}
|
|
<IconPlaceholder
|
|
lucide="ArrowUpRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight02Icon"
|
|
phosphor="ArrowUpRightIcon"
|
|
remixicon="RiArrowRightUpLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</a>
|
|
</Badge>
|
|
<Badge asChild variant="link">
|
|
<a href="#">
|
|
Link{" "}
|
|
<IconPlaceholder
|
|
lucide="ArrowUpRightIcon"
|
|
tabler="IconArrowUpRight"
|
|
hugeicons="ArrowRight02Icon"
|
|
phosphor="ArrowUpRightIcon"
|
|
remixicon="RiArrowRightUpLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</a>
|
|
</Badge>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function BadgeLongText() {
|
|
return (
|
|
<Example title="Long Text">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge variant="secondary">
|
|
A badge with a lot of text to see how it wraps
|
|
</Badge>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function BadgeCustomColors() {
|
|
return (
|
|
<Example title="Custom Colors" className="max-w-fit">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge className="bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50">
|
|
Blue
|
|
</Badge>
|
|
<Badge className="bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50">
|
|
Green
|
|
</Badge>
|
|
<Badge className="bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50">
|
|
Sky
|
|
</Badge>
|
|
<Badge className="bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50">
|
|
Purple
|
|
</Badge>
|
|
<Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
|
|
Blue
|
|
</Badge>
|
|
<Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
|
|
Green
|
|
</Badge>
|
|
<Badge className="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
|
|
Sky
|
|
</Badge>
|
|
<Badge className="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
|
|
Purple
|
|
</Badge>
|
|
<Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
|
|
Red
|
|
</Badge>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|