HTTP Status
A status code with its reason phrase. Colour follows the class, never the individual code — grading a 503 as worse than a 500 invents a severity ordering that does not exist.
src/components/ui/http-status.tsxAbout
From the component's own source, where it was written.
An HTTP status code with its meaning.
The number alone is only legible to people who have memorised the table, and the ones that matter most are the ones nobody memorises — 409, 422, 429 are each a different action for the reader. The reason phrase is shown beside the code rather than behind a tooltip.
Colour follows the class, not the individual code: every 2xx is the same green, every 5xx the same red. Grading within a class invents a severity ordering that does not exist — a 503 is not "worse" than a 500, it is different.
3xx is treated as informational rather than as success. A redirect is not a completed request, and colouring it green hides a redirect loop.
Install
npx astralyx-ui add http-status
Usage
import { HttpStatus } from '@/components/ui/http-status'
<HttpStatus status={429} />Composer
Change the props and the source below follows.
<HttpStatus status={429} />Examples
Every class of response
<HttpStatus status={200} />
<HttpStatus status={301} />
<HttpStatus status={404} />
<HttpStatus status={503} />Codes only
<HttpStatus status={429} showPhrase={false} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
HttpStatus
An HTTP status code with its meaning.
Extends Omit<ComponentProps<typeof Badge>, 'color' | 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'outline' | 'ghost' | — | — |
| size | 'sm' | 'default' | 'sm' | — |
| icon | ReactNode | — | Rendered inside the badge, before or after the text. |
| shape | 'rounded' | 'pill' | — | — |
| asChild | boolean | — | Render the child element instead of a <span>, keeping the styles. |
| tint | string | — | Any CSS colour, used instead of a named color set. |
| iconPosition | 'start' | 'end' | — | — |
| status | number | required | The code. Reason phrases for the common ones are built in. |
| phrase | string | — | Overrides the built-in phrase — for a server that sends its own. |
| showPhrase | boolean | true | Off gives a bare code, for a dense table. |
Functions
| Function | Signature | Description |
|---|---|---|
| httpPhrases | Record<number, string> | An HTTP status code with its meaning. |
| httpStatusTone | (status: number) => 'neutral' | 'destructive' | 'amber' | 'blue' | 'green' | Colour by class. Grading inside a class implies an ordering that is not real. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| colour | by class | One green for every 2xx, one red for every 5xx. 3xx is informational, not success: a redirect is not a completed request, and green hides a redirect loop. |