snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
This commit is contained in:
upstream-mirror
339
apps/v4/registry/bases/base/examples/badge-example.tsx
Normal file
339
apps/v4/registry/bases/base/examples/badge-example.tsx
Normal file
@@ -0,0 +1,339 @@
|
||||
import {
|
||||
Example,
|
||||
ExampleWrapper,
|
||||
} from "@/registry/bases/base/components/example"
|
||||
import { Badge } from "@/registry/bases/base/ui/badge"
|
||||
import { Spinner } from "@/registry/bases/base/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 style-sera:gap-6">
|
||||
<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 style-sera:gap-6">
|
||||
<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 style-sera:gap-6">
|
||||
<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 style-sera:gap-6">
|
||||
<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 style-sera:gap-6">
|
||||
<Badge
|
||||
render={
|
||||
<a href="#">
|
||||
Link{" "}
|
||||
<IconPlaceholder
|
||||
lucide="ArrowUpRightIcon"
|
||||
tabler="IconArrowUpRight"
|
||||
hugeicons="ArrowUpRightIcon"
|
||||
phosphor="ArrowUpRightIcon"
|
||||
remixicon="RiArrowRightUpLine"
|
||||
data-icon="inline-end"
|
||||
/>
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
render={
|
||||
<a href="#">
|
||||
Link{" "}
|
||||
<IconPlaceholder
|
||||
lucide="ArrowUpRightIcon"
|
||||
tabler="IconArrowUpRight"
|
||||
hugeicons="ArrowUpRightIcon"
|
||||
phosphor="ArrowUpRightIcon"
|
||||
remixicon="RiArrowRightUpLine"
|
||||
data-icon="inline-end"
|
||||
/>
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
<Badge
|
||||
variant="destructive"
|
||||
render={
|
||||
<a href="#">
|
||||
Link{" "}
|
||||
<IconPlaceholder
|
||||
lucide="ArrowUpRightIcon"
|
||||
tabler="IconArrowUpRight"
|
||||
hugeicons="ArrowUpRightIcon"
|
||||
phosphor="ArrowUpRightIcon"
|
||||
remixicon="RiArrowRightUpLine"
|
||||
data-icon="inline-end"
|
||||
/>
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
<Badge
|
||||
variant="ghost"
|
||||
render={
|
||||
<a href="#">
|
||||
Link{" "}
|
||||
<IconPlaceholder
|
||||
lucide="ArrowUpRightIcon"
|
||||
tabler="IconArrowUpRight"
|
||||
hugeicons="ArrowRight02Icon"
|
||||
phosphor="ArrowUpRightIcon"
|
||||
remixicon="RiArrowRightUpLine"
|
||||
data-icon="inline-end"
|
||||
/>
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function BadgeLongText() {
|
||||
return (
|
||||
<Example title="Long Text">
|
||||
<div className="flex flex-wrap gap-2 style-sera:gap-6">
|
||||
<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 style-sera:gap-6">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user