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

Badge 徽标

徽标 —— 独立 pill 或贴在子元素角落，dot / count 两种形态。

独立 pill

不传 children 时，Badge 是一个独立的小胶囊，可以放在文本旁边。dot 模式渲染成纯圆点，没有内容。

New3Betaokhot

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

<template>
<CfBadge content="New" tone="primary" />
<CfBadge content="3" />
<CfBadge content="Beta" tone="info" />
<CfBadge content="ok" tone="success" />
<CfBadge content="hot" tone="warning" />
<CfBadge dot tone="danger" />
</template>

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

export default function Demo() {
return (
  <>
    <CfBadge content="New" tone="primary" />
    <CfBadge content="3" />
    <CfBadge content="Beta" tone="info" />
    <CfBadge content="ok" tone="success" />
    <CfBadge content="hot" tone="warning" />
    <CfBadge dot tone="danger" />
  </>
);
}

贴附子元素

把内容塞进默认插槽 / children，Badge 自动绝对定位到子元素的角上。placement 控制角落位置。

5CQALPro

<CfBadge :content="5">
<CfButton variant="tertiary">收件箱</CfButton>
</CfBadge>

<CfBadge dot tone="success">
<CfAvatar name="Chen Qi" />
</CfBadge>

<CfBadge dot tone="warning" placement="bottom-right">
<CfAvatar name="Anna Lee" />
</CfBadge>

<CfBadge content="Pro" tone="info" placement="top-left">
<CfButton variant="tertiary">账户</CfButton>
</CfBadge>

<CfBadge content={5}>
<CfButton variant="tertiary">收件箱</CfButton>
</CfBadge>

<CfBadge dot tone="success">
<CfAvatar name="Chen Qi" />
</CfBadge>

<CfBadge dot tone="warning" placement="bottom-right">
<CfAvatar name="Anna Lee" />
</CfBadge>

<CfBadge content="Pro" tone="info" placement="top-left">
<CfButton variant="tertiary">账户</CfButton>
</CfBadge>

数字与溢出

max 控制溢出阈值，超出渲染成 ${max}+。showZero 让数字 0 也显示（默认隐藏）。

399+1200

<CfBadge :content="3">
<CfButton>3 条</CfButton>
</CfBadge>

<CfBadge :content="120">  <!-- 默认 max=99，渲染成 99+ -->
<CfButton>默认 max=99</CfButton>
</CfBadge>

<CfBadge :content="120" :max="999">
<CfButton>max=999</CfButton>
</CfBadge>

<CfBadge :content="0" show-zero tone="success">
<CfButton>show-zero</CfButton>
</CfBadge>

<CfBadge content={3}>
<CfButton>3 条</CfButton>
</CfBadge>

<CfBadge content={120}>
<CfButton>默认 max=99</CfButton>
</CfBadge>

<CfBadge content={120} max={999}>
<CfButton>max=999</CfButton>
</CfBadge>

<CfBadge content={0} showZero tone="success">
<CfButton>show-zero</CfButton>
</CfBadge>

API

Prop	类型	默认值	说明
`content`	`string \| number`	—	显示内容；空时 + 非 dot 不渲染
`dot`	`boolean`	`false`	圆点模式（忽略 content）
`tone`	`'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'danger'`	语义色
`max`	`number`	`99`	数字上限，超出渲染为 `${max}+`
`showZero`	`boolean`	`false`	数字 `0` 默认隐藏，开启后显示
`placement`	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`	wrap 模式下角落位置
`offset`	`[number, number]`	—	在 placement 之上叠加 `[x, y]` 像素偏移