- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Slider
- 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 function BadgeDemo() {
return <Badge>Badge</Badge>
}
Installation
pnpm dlx shadcn@latest add https://coss.com/ui/r/badge.json
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 function BadgeOutline() {
return <Badge variant="outline">Badge</Badge>
}
Secondary
import { Badge } from "@/components/ui/badge"
export function BadgeSecondary() {
return <Badge variant="secondary">Badge</Badge>
}
Destructive
import { Badge } from "@/components/ui/badge"
export function BadgeDestructive() {
return <Badge variant="destructive">Badge</Badge>
}
Info
import { Badge } from "@/components/ui/badge"
export function BadgeInfo() {
return <Badge variant="info">Badge</Badge>
}
Success
import { Badge } from "@/components/ui/badge"
export function BadgeSuccess() {
return <Badge variant="success">Badge</Badge>
}
Warning
import { Badge } from "@/components/ui/badge"
export function BadgeWarning() {
return <Badge variant="warning">Badge</Badge>
}
Error
import { Badge } from "@/components/ui/badge"
export function BadgeError() {
return <Badge variant="error">Badge</Badge>
}
Small
import { Badge } from "@/components/ui/badge"
export function BadgeSm() {
return <Badge size="sm">Badge</Badge>
}
Large
import { Badge } from "@/components/ui/badge"
export function BadgeLg() {
return <Badge size="lg">Badge</Badge>
}
With Icon
import { CheckIcon } from "lucide-react"
import { Badge } from "@/components/ui/badge"
export function BadgeWithIcon() {
return (
<Badge variant="outline">
<CheckIcon />
Verified
</Badge>
)
}
With Link
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
export function BadgeWithLink() {
return <Badge render={<Link href="/" />}>Badge</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.com 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.com 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>
)
}