Preview Updated 2026-05-10

Stat

KPI metric card with number, label, and trend. Designed for dashboard summary headers.

Basic usage

label + value is the minimum config.

今日访问

12384

<CfStat label="Today's visits" :value="12384" variant="outlined" />

<CfStat label="Today's visits" value={12384} variant="outlined" />

Trends and prefix / suffix

trend — { delta, direction?, label? }. When direction is omitted it’s inferred from the value’s sign (positive green, negative red, zero gray). prefix / suffix add small text around the number (currency, percent sign).

今日访问

12384

+12.4%环比昨日

转化率

3.2%

-0.4%环比昨日

收入

¥84520

0与昨日持平

<CfStat label="Today's visits" :value="12384" :trend="{ delta: '+12.4%', label: 'vs. yesterday' }" variant="outlined" />
<CfStat label="Conversion" value="3.2" suffix="%" :trend="{ delta: '-0.4%', label: 'vs. yesterday' }" variant="outlined" />
<CfStat label="Revenue" :value="84520" prefix="¥" :trend="{ delta: 0, label: 'flat vs. yesterday' }" variant="outlined" />

<CfStat label="Today's visits" value={12384} trend={{ delta: '+12.4%', label: 'vs. yesterday' }} variant="outlined" />
<CfStat label="Conversion" value="3.2" suffix="%" trend={{ delta: '-0.4%', label: 'vs. yesterday' }} variant="outlined" />
<CfStat label="Revenue" value={84520} prefix="¥" trend={{ delta: 0, label: 'flat vs. yesterday' }} variant="outlined" />

Variants

variant controls background and border: default (transparent) / outlined (border) / soft (light gray fill).

default

无边框，透明背景

outlined

带描边，常用做卡片

soft

灰色软背景

<CfStat label="default" :value="42" />
<CfStat label="outlined" :value="42" variant="outlined" />
<CfStat label="soft" :value="42" variant="soft" />

<CfStat label="default" value={42} />
<CfStat label="outlined" value={42} variant="outlined" />
<CfStat label="soft" value={42} variant="soft" />

Sizes

size changes the main number’s font size — sm compact / md default / lg for landing-page emphasis.

size = sm

size = md

size = lg

<CfStat label="size = sm" :value="42" size="sm" variant="outlined" />
<CfStat label="size = md" :value="42" size="md" variant="outlined" />
<CfStat label="size = lg" :value="42" size="lg" variant="outlined" />

<CfStat label="size = sm" value={42} size="sm" variant="outlined" />
<CfStat label="size = md" value={42} size="md" variant="outlined" />
<CfStat label="size = lg" value={42} size="lg" variant="outlined" />

Loading

When loading, the number slot shows — so 0 doesn’t flash before data arrives.

数据加载中

正常状态

123

<CfStat label="Loading" :value="0" loading variant="outlined" />
<CfStat label="Ready" :value="123" variant="outlined" />

<CfStat label="Loading" value={0} loading variant="outlined" />
<CfStat label="Ready" value={123} variant="outlined" />

API

Prop	Type	Default	Description
`label`	`string \| ReactNode`	`—`	Small label above the number
`value`	`string \| number \| ReactNode`	`—`	Main number
`prefix` / `suffix`	`string \| ReactNode`	`—`	Small text before/after the number
`hint`	`string \| ReactNode`	`—`	Helper text below
`trend`	`StatTrend`	`—`	`{ delta, direction?, label? }`; direction inferred from sign when omitted
`variant`	`'default' \| 'outlined' \| 'soft'`	`'default'`	Visual mode
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Number font size
`loading`	`boolean`	`false`	Loading state, number slot shows `—`

Slots (Vue) / props (React): leading / trailing (label row ends), footer (appended at the bottom).