Chip
chip标签 · 可移除(onClose×) + dot + tone×variant(区别 Badge 计数)
用法
变体与语气
variant（soft / solid / outline）× tone（brand / danger / neutral）组合视觉。
品牌品牌品牌危险中性
tsx
<>
<Chip tone="brand">品牌</Chip>
<Chip variant="solid" tone="brand">品牌</Chip>
<Chip variant="outline" tone="brand">品牌</Chip>
<Chip tone="danger">危险</Chip>
<Chip tone="neutral">中性</Chip>
</>前导内容
dot 状态点 / startContent 图标 / avatar 头像三选一（优先级 avatar > startContent > dot）。
在线New安安娜
tsx
<>
<Chip dot tone="brand">在线</Chip>
<Chip tone="brand" startContent={<Sparkles className="size-3.5" />}>New</Chip>
<Chip tone="brand" avatar={<Avatar fallback="安" />}>安娜</Chip>
</>可移除
传 onClose 渲染关闭(×)按钮，点击触发回调由调用方移除。
ReactVue
tsx
<Chip tone="brand" onClose={() => remove(item)}>
React
</Chip>禁用
isDisabled 降透明度、屏蔽指针、关闭按钮不可点。
禁用禁用可关闭
tsx
<>
<Chip isDisabled>禁用</Chip>
<Chip isDisabled onClose={() => {}}>禁用可关闭</Chip>
</>何时用
展示一个分类/筛选/选中标签，常带可移除（×）、前导点、头像或图标。它表达「一个带文字的标签实体且可被移除」；要叠加到宿主四角的未读计数/红点用 Badge；只要一个纯状态圆点用 Dot。
导入
ts
import { Chip, chipVariants } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| variant | "solid"｜"soft"｜"outline" | soft | 视觉风格。 |
| tone | "brand"｜"danger"｜"neutral" | brand | 语气色。 |
| size | "sm"｜"md" | md | 尺寸。 |
| dot | boolean | — | 前导小圆点（状态指示）。 |
| isDisabled | boolean | — | 禁用：降透明度、屏蔽指针事件、关闭按钮不可点。 |
| className | string | — | — |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClose | () => void | 提供则渲染关闭(×)按钮并触发回调（区别于 Badge：Chip 可移除）。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| avatar | ReactNode | 前导头像（贴左边缘，按 size 约束为正方形）。 |
| startContent | ReactNode | 起始内容槽（图标等），avatar 存在时不渲染。 |
| endContent | ReactNode | 结尾内容槽，位于 children 之后、关闭按钮之前。 |
| children | ReactNode | 标签文字。 |
禁忌 / 坑
暂无已知坑。前导内容互斥优先级为 avatar > startContent > dot——三者同传只渲染 avatar。要出现 × 关闭按钮必须传 onClose（即便回调为空函数）。isDisabled 会屏蔽整片指针事件，连 × 也点不动。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
可关闭
<Chip onClose={() => {}}>标签</Chip>