Badge

用于在标题、项目或表格行旁展示简短状态与分类。

预览

并排比较默认、primary、soft、outline 和 destructive 标签。

DefaultPrimarySoftOutlineDestructive

npx shadcn@latest add @neumorphism-ui/badge

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

在 Badge 中放入简短名称，通过 variant 调整强调程度。需要执行操作时使用按钮或链接。

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return <Badge variant="primary">Ready</Badge>;
}

一个轻量的 span 组件，提供五种变体。它只提供视觉强调，不附加交互行为或隐式 ARIA role。

组件	属性	类型	默认值	说明
`Badge`	`variant`	`"default" \| "primary" \| "soft" \| "outline" \| "destructive"`	`"default"`	选择状态的强调程度和颜色。
`Badge`	`children`必填	`React.ReactNode`	`—`	简短的状态或分类文本。
`Badge`	`className`	`string`	`—`	扩展尺寸、间距和颜色。