Preview Updated 2026-05-10

Tag

Tag — 3 variants, 6 tones, 3 sizes, closable, optional pill radius.

Basic usage

tone controls the semantic color, default neutral (gray). Other options: primary / success / warning / danger / info.

背景

DefaultPrimarySuccessWarningDangerInfo

src/App.vue

<script setup lang="ts">
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row">
    <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>
  </div>
</template>

<script setup>
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row">
    <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>
  </div>
</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>
  </>
);
}

Variants, sizes, and radius

variant is orthogonal to tone: solid / soft (default) / outline. rounded switches to a pill radius.

背景

solidsoftoutline

smmdlgrounded

src/App.vue

<script setup lang="ts">
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfTag variant="solid" tone="primary">solid</CfTag>
      <CfTag variant="soft" tone="primary">soft</CfTag>
      <CfTag variant="outline" tone="primary">outline</CfTag>
    </div>
    <div class="demo-row">
      <CfTag variant="solid" tone="danger">solid</CfTag>
      <CfTag variant="soft" tone="danger">soft</CfTag>
      <CfTag variant="outline" tone="danger">outline</CfTag>
    </div>
    <div class="demo-row">
      <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>
    </div>
  </div>
</template>

<script setup>
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfTag variant="solid" tone="primary">solid</CfTag>
      <CfTag variant="soft" tone="primary">soft</CfTag>
      <CfTag variant="outline" tone="primary">outline</CfTag>
    </div>
    <div class="demo-row">
      <CfTag variant="solid" tone="danger">solid</CfTag>
      <CfTag variant="soft" tone="danger">soft</CfTag>
      <CfTag variant="outline" tone="danger">outline</CfTag>
    </div>
    <div class="demo-row">
      <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>
    </div>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <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

Enable closable to show an × button; clicking it fires close / onClose.

背景

VueAstroTailwindTypeScript

src/App.vue

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

const tags = ref(['Vue', 'Astro', 'Tailwind', 'TypeScript']);

function remove(t: string) {
  tags.value = tags.value.filter((x) => x !== t);
}
function reset() {
  tags.value = ['Vue', 'Astro', 'Tailwind', 'TypeScript'];
}
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfTag v-for="t in tags" :key="t" tone="primary" closable @close="remove(t)">
        {{ t }}
      </CfTag>
      <CfButton
        v-if="!tags.length"
        class="cf-btn cf-btn--soft cf-btn--sm"
        @click="reset"
      >全部清空，点这里恢复</CfButton>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfTag } from '@chufix-design/vue';

const tags = ref(['Vue', 'Astro', 'Tailwind', 'TypeScript']);

function remove(t) {
  tags.value = tags.value.filter((x) => x !== t);
}
function reset() {
  tags.value = ['Vue', 'Astro', 'Tailwind', 'TypeScript'];
}
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfTag v-for="t in tags" :key="t" tone="primary" closable @close="remove(t)">
        {{ t }}
      </CfTag>
      <CfButton
        v-if="!tags.length"
        class="cf-btn cf-btn--soft cf-btn--sm"
        @click="reset"
      >全部清空，点这里恢复</CfButton>
    </div>
  </div>
</template>

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

export default function Demo() {
  const [tags, setTags] = useState(['Vue', 'Astro', 'Tailwind', 'TypeScript']);
  return (
    <>
      {tags.map((t) => (
      <CfTag
        key={t}
        tone="primary"
        closable
        onClose={() => setTags((xs) => xs.filter((x) => x !== t))}
      >{t}</CfTag>
      ))}
    </>
  );
}

API

Prop	Type	Default	Description
`variant`	`'solid' \| 'soft' \| 'outline'`	`'soft'`	Visual variant
`tone`	`'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	Semantic color
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height and font size
`rounded`	`boolean`	`false`	Pill radius
`closable`	`boolean`	`false`	Show × close button

Slots / Children

Vue: default slot is the text; leading named slot for an icon.
React: children is the text; leading prop for an icon node.