Badge

Small status label.

badge-example.tsx

import { Block, Document, Page } from "@ui-registries/pdf";import { Badge } from "@/components/pdf/badge";
export default function BadgeExample() {  return (    <Document>      <Page className="gap-6 bg-background p-10 text-sm" size={{ width: 420 }}>        <Block className="flex-row gap-2">          <Badge>Default</Badge>          <Badge variant="secondary">Secondary</Badge>          <Badge variant="destructive">Destructive</Badge>          <Badge variant="outline">Outline</Badge>        </Block>      </Page>    </Document>  );}

Installation

Terminal

npx shadcn add https://ui-registry.com/r/pdf/badge.json

Usage

tsx

import { Badge } from "@/components/pdf/badge";
<Badge>Paid</Badge><Badge variant="secondary">Due</Badge><Badge variant="destructive">Overdue</Badge><Badge variant="outline">Draft</Badge>

In a row, a badge only takes the width of its content (self-start). Override with className if needed.