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

# Code

Geist Mono for code, identifiers and machine-readable values — anything read as literal rather than as prose. This ramp is for inline fragments; multi-line blocks are `CodeSnippet`, drawn with looser leading so stacked lines breathe.

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

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

export const Basic = () => (
  <Code>const example = 'code'</Code>
);
```

## Usage

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

## Examples

### Sizes

The ramp. Never add letter-spacing to it — monospace depends on a fixed character cell, and
tracking breaks alignment in diffs, terminal output and anything measured in `ch`.

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

export const Sizes = () => (
  <VStack gap={24} align='start'>
    {SIZES.map(({ size, metrics }) => (
      <VStack key={size} gap={4} align='start'>
        <Text size='xs' color='secondary'>
          size=&apos;{size}&apos; · {metrics}
        </Text>
        <Code size={size}>
          console.log('hello world');
        </Code>
      </VStack>
    ))}
  </VStack>
);
```

### Weights

Weight for emphasis within code, which buys less here than elsewhere: in a monospace run,
bold is harder to spot than colour.

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

export const Weights = () => (
  <VStack align='start'>
    <Code size='m' weight='light'>
      const light = 'Light weight code';
    </Code>
    <Code size='m' weight='regular'>
      const regular = 'Regular weight code';
    </Code>
    <Code size='m' weight='medium'>
      const medium = 'Medium weight code';
    </Code>
    <Code size='m' weight='bold'>
      const bold = 'Bold weight code';
    </Code>
  </VStack>
);
```

### Colors

The same de-emphasis ladder as `Text`, for dimming part of an identifier rather than all of
it.

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

export const Colors = () => (
  <VStack align='start'>
    <Code color='primary'>
      const light = 'Primary color code';
    </Code>
    <Code color='secondary'>
      const regular = 'Secondary color code';
    </Code>
  </VStack>
);
```

### Multiline

What happens when code wraps in this ramp — tight leading, because it is drawn for one line.
Past a couple of lines, reach for `CodeSnippet`.

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

export const Multiline = () => (
  <Code size='m'>
    {`function example() {
  const message = 'Hello, World!';
  console.log(message);
  return message;
}`}
  </Code>
);
```

### Italic

`italic` is a modifier rather than a step, pairing with any size and weight. Conventionally
it marks a placeholder the reader is meant to replace.

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

export const Italic = () => (
  <VStack align='start'>
    <Code size='s' italic>
      {'// Italic small code comment'}
    </Code>
    <Code size='m' italic>
      {'// Italic medium code comment'}
    </Code>
    <Code size='l' italic>
      {'// Italic large code comment'}
    </Code>
    <Code size='s' weight='bold' italic>
      {'// Bold italic small'}
    </Code>
    <Code size='m' weight='bold' italic>
      {'// Bold italic medium'}
    </Code>
    <Code size='l' weight='bold' italic>
      {'// Bold italic large'}
    </Code>
  </VStack>
);
```

### As child

`asChild` puts the monospace styling on your own element, for when the tag carries meaning
the styling should not override.

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

export const AsChild = () => (
  <Code size='m' weight='medium' asChild>
    <code>{'<CustomCodeElement />'}</code>
  </Code>
);
```

## Props

| Prop           | Type                                                                | Default   | Description |
| -------------- | ------------------------------------------------------------------- | --------- | ----------- |
| defaultChecked | `boolean \| undefined`                                              |           |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                |           |             |
| autoFocus      | `boolean \| undefined`                                              |           |             |
| id             | `string \| undefined`                                               |           |             |
| tabIndex       | `number \| undefined`                                               |           |             |
| title          | `string \| undefined`                                               |           |             |
| rel            | `string \| undefined`                                               |           |             |
| color          | `string \| undefined`                                               | `primary` |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                       |           |             |
| size           | `{ xs: string; s: string; m: string; l: string; }`                  | `l`       |             |
| weight         | `{ light: string; regular: string; medium: string; bold: string; }` | `regular` |             |
| truncate       | `{ true: string; }`                                                 | `false`   |             |
| italic         | `{ true: string; false: string; }`                                  | `false`   |             |
| asChild        | `boolean \| undefined`                                              | `false`   |             |
| lineClamp      | `number \| undefined`                                               |           |             |
| data-testid    | `string \| undefined`                                               |           |             |