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