Sections
Get Started
UI
Components
- Animated Beam
- Animated List
- Animated Logo
- Animated Theme Toggler
- Avatar Circles
- Bento Grid
- Big Name Text
- Border Beam
- Dock
- Feature Card
- Filter Dropdown
- Footer Link
- Hero Badge
- Hero Buttons
- Hyper Text
- Lens
- Magic Card
- Marquee
- Meteors
- Onboarding Form
- Pricing Card
- Scroll Text
- Section Header
- Site Header
- Status Card
- Status
- Tweet Card
BadgeSecondaryDestructiveOutline
Verified89920+
import { AlertCircleIcon, BadgeCheckIcon, CheckIcon } from "lucide-react";
import { Badge } from "@/registry/sase/badge";
export function BadgeDemo() {
return (
<div className="flex flex-col items-center gap-2">
<div className="flex w-full flex-wrap gap-2">
<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
</div>
<div className="flex w-full flex-wrap gap-2">
<Badge
variant="secondary"
className="bg-blue-500 text-white dark:bg-blue-600"
>
<BadgeCheckIcon />
Verified
</Badge>
<Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
8
</Badge>
<Badge
className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
variant="destructive"
>
99
</Badge>
<Badge
className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
variant="outline"
>
20+
</Badge>
</div>
</div>
);
}
Installation
pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/badge.json
Usage
import { Badge } from "@/components/ui/badge";<Badge variant="default | outline | secondary | destructive">Badge</Badge>Link
You can use the asChild prop to make another component look like a badge. Here's an example of a link that looks like a badge.
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
export function LinkAsBadge() {
return (
<Badge asChild>
<Link href="/">Badge</Link>
</Badge>
);
}