Badge
A small label for counts, statuses, or short metadata.
Preview
Installation
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>
}API Reference
Badge
A badge component using Base UI's useRender hook for flexible rendering.