- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- EmptyNew
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input GroupNew
- KbdNew
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- SkeletonNew
- Slider
- SpinnerNew
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Badge
A badge or a component that looks like a 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>
}Examples
Outline
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="outline">Badge</Badge>;
}
Secondary
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="secondary">Badge</Badge>;
}
Destructive
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="destructive">Badge</Badge>;
}
Info
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="info">Badge</Badge>;
}
Success
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="success">Badge</Badge>;
}
Warning
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="warning">Badge</Badge>;
}
Error
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge variant="error">Badge</Badge>;
}
Small
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge size="sm">Badge</Badge>;
}
Large
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge size="lg">Badge</Badge>;
}
With Icon
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
import { Badge } from "@/components/ui/badge";
export default function Particle() {
return <Badge className="min-w-4.5 rounded-full">7</Badge>;
}
Comparing with Radix / shadcn
If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss ui quickly.
Prop Mapping
| Component | Radix UI Prop | Base UI Prop |
|---|---|---|
Badge | asChild | render |
Quick Checklist
- Replace
asChild→renderonBadge
Additional Notes
Size Comparison
Compared to shadcn/ui, our Badge component includes size variants for better density control. shadcn/ui badges have a fixed size, while our component offers flexible sizing with sm, default, and lg options.
So, if you want to preserve the original shadcn/ui badge size, you should use the lg size in coss ui.
New Variants
We've added new colored variants to the existing ones (default, destructive, outline, secondary) for better semantic meaning and visual communication:
We've added new colored variants for better semantic meaning:
| Variant | Description |
|---|---|
info | Blue badge for information |
success | Green badge for success states |
warning | Yellow badge for warnings |
error | Red badge for errors |
Ensure you have the following variables imported in your CSS file:
--destructive-foreground--info--info-foreground--success--success-foreground--warning--warning-foreground
Comparison Example
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
export function LinkAsButton() {
return (
<Badge asChild>
<Link href="/login">Login</Link>
</Badge>
)
}import Link from "next/link"
import { Badge } from "@/components/ui/badge"
export function LinkAsButton() {
return (
<Badge render={<Link href="/login" />}>Login</Badge>
)
}