Badge

A flexible and customizable badge component with various sizes and color variants.

Amber

Amber Subtle

Red

Red Subtle

Gray

Gray Subtle

Blue

Blue Subtle

Purple

Purple Subtle

Large

Medium

Small

Installation

$ not supported yet

Usage

import { Badge } from "@/components/ui/badge";
<div className="flex gap-2">
  <Badge variant="amber">Amber</Badge>
  <Badge variant="amber-subtle">Amber Subtle</Badge>
</div>