Root
Tools
Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Dialog
- DropdownNew
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Badge
A badge or a component that looks like a badge.
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge>Badge</Badge>;
}
Installation
bunx --bun shadcn@latest add @shaddercn/badge
Usage
import { Badge } from "@/components/ui/badge"<Badge>Badge</Badge>Link
You can use the render 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 render={<Link href="/pricing" />}>New</Badge>
}Examples
Outline
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="outline">Badge</Badge>;
}
Secondary
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="secondary">Badge</Badge>;
}
Destructive
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="destructive">Badge</Badge>;
}
Info
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="info">Badge</Badge>;
}
Success
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="success">Badge</Badge>;
}
Warning
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="warning">Badge</Badge>;
}
Error
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="error">Badge</Badge>;
}
Small
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge size="sm">Badge</Badge>;
}
Large
Badge
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge size="lg">Badge</Badge>;
}
With Icon
Verified
import { CheckIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return (
<Badge variant="outline">
<CheckIcon />
Verified
</Badge>
);
}
With Link
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge render={<Link href="/" />}>Badge</Badge>;
}
With Count
7
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge className="rounded-full">7</Badge>;
}