Back to Supabase

Status Code

apps/design-system/content/docs/fragments/status-codes.mdx

1.26.041.3 KB
Original Source
<ComponentPreview name="status-code-demo" peekCode wide />

Usage

tsx
import { StatusCode } from 'ui-patterns'
tsx
<StatusCode method="GET" statusCode="200" />

API Reference

PropTypeDefaultDescription
statusCodenumber | string | undefinedThe HTTP status code to display. Drives the color coding (see below).
methodstringOptional HTTP method label (e.g. GET, POST). Rendered as a pill prefix.
classNamestringAdditional CSS classes applied to the root element.

Color coding

The status code pill color is determined automatically from the statusCode value:

ValueColor
1xx, 2xx, 3xx, 'info', 'success', undefinedNeutral
4xx, 'warning', 'redirect'Warning
5xx, 'error'Destructive