Preview Updated 2026-05-10

Badge

Standalone pill or corner-attached marker — supports dot and count modes.

Standalone pill

Without children, Badge renders as an inline pill that can sit next to text. dot mode renders as a pure dot with no content.

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" />
  </>
);
}

Attached to a child

Pass content into the default slot / children and Badge automatically positions itself in the child’s corner. placement controls which corner.

5CQALPro

<CfBadge :content="5">
<CfButton variant="tertiary">Inbox</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">Account</CfButton>
</CfBadge>

<CfBadge content={5}>
<CfButton variant="tertiary">Inbox</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">Account</CfButton>
</CfBadge>

Numbers and overflow

max sets the overflow threshold; values past it render as ${max}+. showZero keeps 0 visible (otherwise hidden).

399+1200

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

<CfBadge :content="120">  <!-- default max=99 → renders as 99+ -->
<CfButton>default 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 items</CfButton>
</CfBadge>

<CfBadge content={120}>
<CfButton>default 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	Type	Default	Description
`content`	`string \| number`	—	Content to display; if empty and not `dot`, the badge does not render
`dot`	`boolean`	`false`	Dot mode (ignores `content`)
`tone`	`'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'danger'`	Semantic color
`max`	`number`	`99`	Numeric overflow threshold; renders as `${max}+`
`showZero`	`boolean`	`false`	Show `0` instead of hiding it
`placement`	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`	Corner position when wrapping a child
`offset`	`[number, number]`	—	Additional `[x, y]` pixel offset on top of `placement`