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
<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 |
反馈与讨论
Status code badge · Discussion