> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/ResponseCode) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-responsecode--overview)

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

export const Playground = () => <ResponseCode />;
```

## Usage

```tsx
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.

```tsx
import { ResponseCode } from '@wallarm-org/design-system/ResponseCode';
import { VStack } from '@wallarm-org/design-system/Stack';

export const AllCategories = () => (
  <VStack align='start' gap={8}>
    <ResponseCode code={100} />
    <ResponseCode code={200} />
    <ResponseCode code={300} />
    <ResponseCode code={400} />
    <ResponseCode code={500} />
  </VStack>
);
```

### 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.

```tsx
import { ResponseCode } from '@wallarm-org/design-system/ResponseCode';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const RealWorldCodes = () => (
  <VStack align='start' gap={8}>
    <HStack gap={8}>
      <ResponseCode code={100} />
      <ResponseCode code={101} />
    </HStack>
    <HStack gap={8}>
      <ResponseCode code={200} />
      <ResponseCode code={201} />
      <ResponseCode code={204} />
    </HStack>
    <HStack gap={8}>
      <ResponseCode code={301} />
      <ResponseCode code={302} />
      <ResponseCode code={304} />
    </HStack>
    <HStack gap={8}>
      <ResponseCode code={400} />
      <ResponseCode code={401} />
      <ResponseCode code={403} />
      <ResponseCode code={404} />
      <ResponseCode code={429} />
    </HStack>
    <HStack gap={8}>
      <ResponseCode code={500} />
      <ResponseCode code={502} />
      <ResponseCode code={503} />
      <ResponseCode code={504} />
    </HStack>
  </VStack>
);
```

### Sizes

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

```tsx
import { ResponseCode } from '@wallarm-org/design-system/ResponseCode';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => (
  <VStack gap={16}>
    <HStack align='center' gap={8}>
      <ResponseCode code={100} size='medium' />
      <ResponseCode code={200} size='medium' />
      <ResponseCode code={301} size='medium' />
      <ResponseCode code={404} size='medium' />
      <ResponseCode code={500} size='medium' />
    </HStack>
    <HStack align='center' gap={8}>
      <ResponseCode code={100} size='large' />
      <ResponseCode code={200} size='large' />
      <ResponseCode code={301} size='large' />
      <ResponseCode code={404} size='large' />
      <ResponseCode code={500} size='large' />
    </HStack>
  </VStack>
);
```

### Wildcard groups

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

```tsx
import { ResponseCode } from '@wallarm-org/design-system/ResponseCode';
import { VStack } from '@wallarm-org/design-system/Stack';

export const WildcardGroups = () => (
  <VStack align='start' gap={8}>
    <ResponseCode code='1XX' />
    <ResponseCode code='2XX' />
    <ResponseCode code='3XX' />
    <ResponseCode code='4XX' />
    <ResponseCode code='5XX' />
  </VStack>
);
```

### 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.

```tsx
import { ResponseCode } from '@wallarm-org/design-system/ResponseCode';
import { HStack } from '@wallarm-org/design-system/Stack';

export const UnknownCodeFallsBackToSlate = () => (
  <HStack align='center' gap={8}>
    <ResponseCode code={0} />
    <ResponseCode code={42} />
    <ResponseCode code={999} />
    <ResponseCode code='???' />
  </HStack>
);
```

## Props

| Prop           | Type                                                  | Default  | Description                                                                                                                                                                                                            |
| -------------- | ----------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| code \*        | `string \| number`                                    |          | HTTP response status code. The category (1xx/2xx/3xx/4xx/5xx) is derived from the first digit and decides the Badge color via `RESPONSE_CODE_COLOR`. Values outside 100–599 render in slate as the "unknown" fallback. |
| size           | `"small" \| "medium" \| "large" \| null \| undefined` | `medium` | Badge size — defaults to `medium`.                                                                                                                                                                                     |
| title          | `string \| undefined`                                 |          |                                                                                                                                                                                                                        |
| defaultChecked | `boolean \| undefined`                                |          |                                                                                                                                                                                                                        |
| defaultValue   | `string \| number \| readonly string[] \| undefined`  |          |                                                                                                                                                                                                                        |
| autoFocus      | `boolean \| undefined`                                |          |                                                                                                                                                                                                                        |
| id             | `string \| undefined`                                 |          |                                                                                                                                                                                                                        |
| tabIndex       | `number \| undefined`                                 |          |                                                                                                                                                                                                                        |
| rel            | `string \| undefined`                                 |          |                                                                                                                                                                                                                        |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`         |          |                                                                                                                                                                                                                        |