开发预览更新于 2026-05-10

Tag 标签

标签 —— 3 种 variant、6 种 tone、3 种尺寸，可关闭、可圆角。

基础用法

tone 控制语义色，默认 neutral（灰色）。其他选项：primary / success / warning / danger / info。

DefaultPrimarySuccessWarningDangerInfo

<script setup lang="ts">
import { CfTag } from '@chufix-design/vue';
</script>

<template>
<CfTag>Default</CfTag>
<CfTag tone="primary">Primary</CfTag>
<CfTag tone="success">Success</CfTag>
<CfTag tone="warning">Warning</CfTag>
<CfTag tone="danger">Danger</CfTag>
<CfTag tone="info">Info</CfTag>
</template>

import { CfTag } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfTag>Default</CfTag>
    <CfTag tone="primary">Primary</CfTag>
    <CfTag tone="success">Success</CfTag>
    <CfTag tone="warning">Warning</CfTag>
    <CfTag tone="danger">Danger</CfTag>
    <CfTag tone="info">Info</CfTag>
  </>
);
}

变体、尺寸与圆角

variant 与 tone 正交：solid / soft（默认）/ outline。rounded 切换到 pill 圆角。

solidsoftoutline

smmdlgrounded

<CfTag variant="solid" tone="primary">solid</CfTag>
<CfTag variant="soft" tone="primary">soft</CfTag>
<CfTag variant="outline" tone="primary">outline</CfTag>

<CfTag size="sm" tone="success">sm</CfTag>
<CfTag size="md" tone="success">md</CfTag>
<CfTag size="lg" tone="success">lg</CfTag>
<CfTag tone="success" rounded>rounded</CfTag>

<CfTag variant="solid" tone="primary">solid</CfTag>
<CfTag variant="soft" tone="primary">soft</CfTag>
<CfTag variant="outline" tone="primary">outline</CfTag>

<CfTag size="sm" tone="success">sm</CfTag>
<CfTag size="md" tone="success">md</CfTag>
<CfTag size="lg" tone="success">lg</CfTag>
<CfTag tone="success" rounded>rounded</CfTag>

可关闭

打开 closable 显示 × 按钮，点击触发 close / onClose。

VueAstroTailwindTypeScript

<CfTag
v-for="t in tags"
:key="t"
tone="primary"
closable
@close="tags = tags.filter(x => x !== t)"
>{{ t }}</CfTag>

{tags.map((t) => (
<CfTag
  key={t}
  tone="primary"
  closable
  onClose={() => setTags((xs) => xs.filter((x) => x !== t))}
>{t}</CfTag>
))}

API

Prop	类型	默认值	说明
`variant`	`'solid' \| 'soft' \| 'outline'`	`'soft'`	视觉变体
`tone`	`'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	语义色
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	高度与字号
`rounded`	`boolean`	`false`	圆角到 pill
`closable`	`boolean`	`false`	显示 × 关闭按钮

插槽 / Children

Vue：默认插槽是文本；leading 具名插槽放图标。
React：children 是文本；leading prop 放图标节点。