Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- 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
Resources
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
pnpm dlx shadcn@latest add @coss/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>
}API Reference
This is a custom component using Base UI's useRender hook, not a direct Base UI wrapper.
Badge
A badge component with variant and size options.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "error" | "info" | "outline" | "secondary" | "success" | "warning" | "default" | Controls the badge styling and color scheme |
size | "default" | "sm" | "lg" | "default" | Controls the badge size |
render | React.ReactElement | - | Render as a different element (e.g., Link) |
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 aria-hidden="true" />
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>;
}