Badge

A beautiful badge component

success-default-smwarning-default-smglass-default-smlink-default-smsuccess-pill-smwarning-pill-smglass-pill-smlink-pill-smsuccess-default-defaultwarning-default-defaultglass-default-defaultlink-default-defaultsuccess-pill-defaultwarning-pill-defaultglass-pill-defaultlink-pill-defaultsuccess-default-lgwarning-default-lgglass-default-lglink-default-lgsuccess-pill-lgwarning-pill-lgglass-pill-lglink-pill-lg

Installation

npx shadcn@latest add https://sid-cn.vercel.app/r/badge.json

Usage

import { Badge } from "@/components/ui/badge"
<Badge
  variant="default | success | warning | destructive | glass | link | outline | secondary"
  shape="default | pill"
  size="default | sm | lg"
>
  Badge
</Badge>