Display

Badge

Pill badge. Pastel backgrounds always pair with AAA-minded text tokens.

FreshNeeds reviewFeaturedFailingDraft
Show code
"use client";

import { Badge } from "@/registry/lilt/ui/badge";

export default function BadgeDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Badge>Fresh</Badge>
      <Badge variant="warning">Needs review</Badge>
      <Badge variant="highlight">Featured</Badge>
      <Badge variant="danger">Failing</Badge>
      <Badge variant="outline">Draft</Badge>
    </div>
  );
}

Installation

npx shadcn@latest add @lilt/badge