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

StatusCodeBadge 状态码徽标

HTTP 状态码徽标，按 1xx / 2xx / 3xx / 4xx / 5xx 自动配色，支持可选 reason 文本。

基础用法

reason 可选，显示在数字后面。边框 + 软色背景双重信号，色盲也可通过数字识别状态类。

背景

200OK201Created301Moved304Not Modified400Bad Request401Unauthorized404Not Found429Too Many500Internal502Bad Gateway504Timeout

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

<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfStatusCodeBadge :code="200" reason="OK" />
    <CfStatusCodeBadge :code="201" reason="Created" />
    <CfStatusCodeBadge :code="301" reason="Moved" />
    <CfStatusCodeBadge :code="304" reason="Not Modified" />
    <CfStatusCodeBadge :code="400" reason="Bad Request" />
    <CfStatusCodeBadge :code="401" reason="Unauthorized" />
    <CfStatusCodeBadge :code="404" reason="Not Found" />
    <CfStatusCodeBadge :code="429" reason="Too Many" />
    <CfStatusCodeBadge :code="500" reason="Internal" />
    <CfStatusCodeBadge :code="502" reason="Bad Gateway" />
    <CfStatusCodeBadge :code="504" reason="Timeout" />
  </div>
</template>

<CfStatusCodeBadge code={200} reason="OK" />
<CfStatusCodeBadge code={404} reason="Not Found" />
<CfStatusCodeBadge code={500} reason="Internal" />

API

属性	类型	默认值	说明
`code`	`number`	—	HTTP 状态码
`reason`	`string`	—	可选 reason phrase
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

类别	范围	颜色 token
1xx	100–199	`--status-info`
2xx	200–299	`--status-success`
3xx	300–399	`--status-info`
4xx	400–499	`--status-warning`
5xx	500–599	`--status-error`