NAMCHE UI

Badge

A compact status pill for build state, plan tier, and other short labels.

LiveBuildingDraftFailedArchivedView run

Install

pnpm dlx shadcn@latest add @namche/badge

Usage

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

<Badge>Live</Badge>
<Badge variant="destructive">Failed</Badge>

variant is default | secondary | destructive | outline | ghost | link. Badge accepts a render prop the same way Button does, so it can render as an anchor or next/link while keeping its own styles.

On this page