mirror of
https://github.com/supabase/supabase.git
synced 2026-05-07 23:19:23 +08:00
36 lines
1.5 KiB
Plaintext
36 lines
1.5 KiB
Plaintext
---
|
|
title: Status Code
|
|
description: Visually informative blocks for displaying HTTP status codes with method indicators.
|
|
fragment: true
|
|
---
|
|
|
|
<ComponentPreview name="status-code-demo" peekCode wide />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { StatusCode } from 'ui-patterns'
|
|
```
|
|
|
|
```tsx
|
|
<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 |
|