Badge

附在其他内容上的简短标签：两端带切角的小号斜切块，文字为倾斜的小号大写字母。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/badge

示例

四种变体与图标

RushHarborDraftLateLocked

badge-variants.tsx

import { Badge } from "@/components/zero/badge";import { LockIcon } from "@/components/zero/icons";export default function BadgeVariants() {  return (    <div className="flex flex-wrap items-center gap-3">      <Badge>Rush</Badge>      <Badge variant="secondary">Harbor</Badge>      <Badge variant="outline">Draft</Badge>      <Badge variant="danger">Late</Badge>      <Badge variant="secondary">        <LockIcon />        Locked      </Badge>    </div>  );}

行为

重要信息用强调色，一般信息用浮起色（灰），次要信息用带暗色描边的黑底，危险信息用红色。图标置于文字之前。

通过 render 可渲染为链接或其他任意元素。作为链接时，悬停时变亮，聚焦时显示焦点框。

属性

Badge

属性	类型	默认值	说明
rarity	"common" \| "uncommon" \| "rare" \| "epic" \| "legendary"	—	按稀有度档位着色（见 Rarity）。
variant	"default" \| "secondary" \| "outline" \| "danger"	"default"	填充样式。
render	ReactElement	—	实际渲染的元素，例如链接。