caliper uidocs
DemoSign inGet Pro

Badge

Free

A small label for status, category or count.

Installs components/ui/badge.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/badge.json
PaidDue 14 OctFailedSyncingDraftProduction

When to use #

Use it for

  • Marking the state of a row, such as Paid or Failed.
  • Adding a count or tag beside a title.

Skip it when

  • The text is long; use a sentence.
  • The label is clickable; use a button or chip.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/badge.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { Badge } from "@/components/ui/badge"

export function BadgeDemo() {
  const [grey, setGrey] = useState(false);
  return (
    <div className="grid justify-items-center gap-4">
      <div className="flex flex-wrap justify-center gap-2" style={{ filter: grey ? "grayscale(1)" : undefined }}>
        <Badge variant="success">Paid</Badge>
        <Badge variant="warning">Due 14 Oct</Badge>
        <Badge variant="error">Failed</Badge>
        <Badge variant="info">Syncing</Badge>
        <Badge variant="neutral" shape>Draft</Badge>
        <Badge>Production</Badge>
      </div>
      <label className="flex items-center gap-2 text-xs text-muted-foreground">
        <input type="checkbox" checked={grey} onChange={(event) => setGrey(event.currentTarget.checked)} />
        Greyscale check: status still reads without colour
      </label>
    </div>
  );
}

API reference #

Badge

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
variant"neutral" | "success" | "warning" | "error" | "info""neutral"
shapebooleanvariant !== "neutral"The status shape before the word. On for status variants, off for neutral labels and counts.

Accessibility #

It is built on native elements and keeps aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.