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

# HttpMethod

Renders an HTTP method as a fixed-colour code `Badge` — the colour is part of the vocabulary rather than a choice: safe reads green, destructive rose, the technical verbs slate. A verb outside the seven known ones prints verbatim in slate, so nothing unexpected is swallowed; reach for `Badge` itself when what you are labelling is not a method.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/HttpMethod) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-httpmethod--overview)

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

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

## Usage

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

## Examples

### All methods

The seven methods with their locked colours, and an unrecognised verb underneath taking
the slate fallback.

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

export const AllMethods = () => (
  <VStack align='start' gap={8}>
    {HTTP_METHODS.map(method => (
      <HttpMethod key={method} method={method} />
    ))}
    <HttpMethod method='OTHER' />
  </VStack>
);
```

### Sizes

`medium`, the default, is a 20px badge; `large` adds vertical padding to reach 24px and
leaves the code type at 12px, so it is about air in the row, not emphasis.

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

export const Sizes = () => (
  <VStack gap={16}>
    <HStack align='center' gap={8}>
      {HTTP_METHODS.map(method => (
        <HttpMethod key={method} method={method} size='medium' />
      ))}
    </HStack>
    <HStack align='center' gap={8}>
      {HTTP_METHODS.map(method => (
        <HttpMethod key={method} method={method} size='large' />
      ))}
    </HStack>
  </VStack>
);
```

### Unknown method falls back to slate

`TRACE`, `CONNECT` and `LINK` are real verbs with no colour of their own, so they come
out slate rather than being dropped or rewritten.

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

export const UnknownMethodFallsBackToSlate = () => (
  <HStack align='center' gap={8}>
    <HttpMethod method='TRACE' />
    <HttpMethod method='CONNECT' />
    <HttpMethod method='LINK' />
  </HStack>
);
```

## Props

| Prop           | Type                                                  | Default  | Description                                                                                                                                                                                             |
| -------------- | ----------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| method \*      | `(string & {}) \| HttpMethodName`                     |          | HTTP method to render. Known values from `HttpMethodName` get a dedicated color via `HTTP_METHOD_COLOR`; any other string renders in slate as the "Other" fallback (the text itself is shown verbatim). |
| 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`         |          |                                                                                                                                                                                                         |