Badge

Shows a short label, status, or count.

Draft

badge-basic-demo.tsx

import { Badge } from "@/components/vip-ui/badge";export function BadgeBasicDemo() {  return <Badge>Draft</Badge>;}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-badge.json

Variants

DraftIn progressPublishedNeeds reviewSync failedInternal

badge-variants-demo.tsx

import { Badge } from "@/components/vip-ui/badge";export function BadgeVariantsDemo() {  return (    <div className="flex max-w-md flex-wrap items-center justify-center gap-3">      <Badge>Draft</Badge>      <Badge variant="accent">In progress</Badge>      <Badge variant="success">Published</Badge>      <Badge variant="warning">Needs review</Badge>      <Badge variant="error">Sync failed</Badge>      <Badge variant="outline">Internal</Badge>    </div>  );}

Dot

Screen readers skip the dot, so the label must name the status.

In progressPublishedNeeds reviewSync failed

badge-demo.tsx

import { Badge } from "@/components/vip-ui/badge";export function BadgeDemo() {  return (    <div className="flex max-w-md flex-wrap items-center justify-center gap-3">      <Badge variant="accent" dot>        In progress      </Badge>      <Badge variant="success" dot>        Published      </Badge>      <Badge variant="warning" dot>        Needs review      </Badge>      <Badge variant="error" dot>        Sync failed      </Badge>    </div>  );}

API reference

variant: "neutral" | "accent" | "success" | "warning" | "error" | "outline" = "neutral": Sets the colors.
dot: boolean = false: Shows a BadgeDot before the label.
children: ReactNode: The badge content. Text stays on one line and truncates if space is short.