Status Code
Visually informative blocks for displaying HTTP status codes with method indicators.
Loading...
import { StatusCode } from 'ui-patterns'
export function StatusCodeDemo() {
return (
<div className="flex flex-col gap-2">
<StatusCode method="GET" statusCode="200" />
<StatusCode method="POST" statusCode="404" />
<StatusCode method="DELETE" statusCode="500" />
<StatusCode method="PUT" statusCode="100" />
</div>
)
}Usage
import { StatusCode } from 'ui-patterns'<StatusCode method="GET" statusCode="200" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
statusCode | number | string | undefined | — | The HTTP status code to display. Drives the color coding (see below). |
method | string | — | Optional HTTP method label (e.g. GET, POST). Rendered as a pill prefix. |
className | string | — | Additional CSS classes applied to the root element. |
Color coding
The status code pill color is determined automatically from the statusCode value:
| Value | Color |
|---|---|
1xx, 2xx, 3xx, 'info', 'success', undefined | Neutral |
4xx, 'warning', 'redirect' | Warning |
5xx, 'error' | Destructive |