#ResponseCode

Renders an HTTP status code as a code Badge coloured by its class — green for success, blue for a redirect, amber for a client error, red for a server error, slate for informational. A mask counts as well as a number, so 2XX or 40X from a filter suggestion takes the colour of its leading digit, and anything outside 100–599 falls back to slate rather than guessing. Pairs with HttpMethod.

Source · Storybook

#Usage

import { ResponseCode } from '@wallarm-org/design-system/ResponseCode';

#Examples

#All categories

The five classes at their round numbers. This is the colour vocabulary, and like HttpMethod it is fixed rather than chosen per screen.

#Real world codes

The codes that actually turn up in logs, a row per class — every code in a row shares its colour, so the eye sorts by severity before it reads the number.

#Sizes

medium is the default; large adds vertical padding and leaves the code type where it is, exactly as on HttpMethod.

#Wildcard groups

The wildcard forms, which is what a filter chip shows when the query matches a whole class rather than one code.

#Unknown code falls back to slate

0, 42, 999 and ??? all fall outside 100–599, so each is printed verbatim in slate — an unrecognised code is shown, never swallowed.

#Props