PaperBadge

A stamp-like badge for status, labels, and tiny metadata.

↗ tiny labels, loud clarity.

Preview

DefaultStableBetaReady

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const paperBadgeVariants = cva(
  'inline-flex items-center rounded-sm border border-ink-black px-2.5 py-0.5 font-mono text-xs uppercase tracking-[0.04em]',

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperBadge/paperBadge.tsx⎘
Step 2.Create the barrel:
components/ui/paperBadge/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperBadge'
```

Variants

Default

Solid

Yellow

Red

Blue

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'solid' \| 'yellow' \| 'red' \| 'green' \| 'blue' \| 'orange'`	`default`	Color style for emphasis and status.
`children`	`ReactNode`	`required`	Badge text content.

Examples

Status chips

Use one color family per panel to avoid noise.

StableBeta

<PaperBadge variant="green">Stable</PaperBadge>

Metadata labels

Mono labels pair well with card subtitles.

v1.0

<PaperBadge>v1.0</PaperBadge>