Atelier UI

搜索组件…

搜索组件…

Badge

状态徽标,包含七种样式、状态圆点、可移除按钮和三种尺寸。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

BadgeProps

同时支持以下类型的全部属性: React.ComponentProps<"span">

属性类型默认值说明
variantBadgeVariant"default"—
sizeBadgeSize"md"—
dotbooleanfalseLeading status dot
onRemove() => void—Shows an x button that calls this handler
removeLabelstring"Remove"—

安装

$ npx shadcn@latest add https://chromotion.dev/r/badge.json

同类组件