数据与反馈@neumorphism-ui/badge

Badge

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

@neumorphism-ui/badge

Registry JSON

预览

DefaultPrimarySoftOutlineDestructive

安装

npx shadcn@latest add @neumorphism-ui/badge

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

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

Example

<div className="flex gap-2">
  <Badge>默认</Badge>
  <Badge variant="primary">就绪</Badge>
  <Badge variant="soft">草稿</Badge>
  <Badge variant="destructive">失败</Badge>
</div>

API 参考

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

预览

安装

用法

Import

Example

API 参考

无障碍