Preview Updated 2026-05-10

Status code badge

HTTP status code badge, auto-colored by 1xx / 2xx / 3xx / 4xx / 5xx, with optional reason text.

Basic usage

reason is optional and renders after the number. Border + soft background give two redundant signals so colorblind users can still identify the status class by number.

背景

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>

<script setup>
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" />

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

API

Prop	Type	Default	Description
`code`	`number`	—	HTTP status code
`reason`	`string`	—	Optional reason phrase
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

Class	Range	Color 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`