Badge
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
A badge or a component that looks like a 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.
Variants
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
npx honestui@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
Our examples cover visual variants, sizes, icon support, and link rendering.