Badge

Overview

Use a badge to display a short label, status, count, category, or metadata.

Badges should be compact and easy to scan. They are useful in tables, cards, headers, filters, and lists. Do not use a badge for long messages or primary actions.

Anatomy

A badge is usually a small inline container with text and optional icon. It can also render another element, such as a link, when the badge needs to be interactive.

Choose the variant by meaning. Outline is neutral, secondary is low emphasis, destructive is for dangerous state, and state variants such as info, success, warning, and error should match the status being shown.

Accessibility

Use readable text, not color alone. If a badge is a link, make sure the destination is clear from the visible text or surrounding context.

Installation

npm

npx love-ui@latest add 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>
}