Badge
安装
npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/badge.jsonyarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/badge.jsonpnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/badge.jsonbunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/badge.json参考
示例
BadgeSecondaryDestructiveOutline
Verified89920+
import { BadgeCheckIcon } from "lucide-react"import { Badge } from "@/registry/ssp/ui/badge"export default function Example() {return ( <div className='flex flex-col items-center gap-2'> <div className='flex w-full flex-wrap gap-2'> <Badge>Badge</Badge> <Badge variant='secondary'>Secondary</Badge> <Badge variant='destructive'>Destructive</Badge> <Badge variant='outline'>Outline</Badge> </div> <div className='flex w-full flex-wrap gap-2'> <Badge variant='secondary' className='bg-blue-500 text-white dark:bg-blue-600' > <BadgeCheckIcon /> Verified </Badge> <Badge className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums'> 8 </Badge> <Badge className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums' variant='destructive' > 99 </Badge> <Badge className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums' variant='outline' > 20+ </Badge> </div> </div>)}