Badge

Badge uses the Base UI useRender hook so it can be rendered as any element via the render prop while keeping its variants.

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/badge.json

UsageCopy Anchor Link

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return <Badge>New</Badge>;
}

ExamplesCopy Anchor Link

VariantsCopy Anchor Link

As a linkCopy Anchor Link

Use the render prop to turn the badge into an anchor:

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return <Badge render={<a href="/changelog" />}>v1.0</Badge>;
}

APICopy Anchor Link

The Badge accepts a variant prop ("default", "secondary", "outline", "destructive", "ghost", "link"), a render prop for composition, and all <span> attributes.