# Code

Marks text to signify a short fragment of computer code.

```jsx
<Code>console.log()</Code>
```

## [API Reference](#api-reference)

This component is based on the `code` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop           | Type                                                      | Default          |
| -------------- | --------------------------------------------------------- | ---------------- |
| `asChild`      | `boolean`                                                 | No default value |
| `size`         | `Responsive<enum>`                                        | No default value |
| `variant`      | `"solid" \| "soft" \| "outline" \| "ghost"`               | `"soft"`         |
| `weight`       | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | No default value |
| `color`        | `enum`                                                    | No default value |
| `highContrast` | `boolean`                                                 | No default value |
| `truncate`     | `boolean`                                                 | No default value |
| `wrap`         | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | No default value |

## [Examples](#examples)

### [Size](#size)

Use the `size` prop to control text size. This prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

```jsx
<Flex direction="column" gap="3" align="start">
  <Code size="1">console.log()</Code>

  <Code size="2">console.log()</Code>

  <Code size="3">console.log()</Code>

  <Code size="4">console.log()</Code>

  <Code size="5">console.log()</Code>

  <Code size="6">console.log()</Code>

  <Code size="7">console.log()</Code>

  <Code size="8">console.log()</Code>

  <Code size="9">console.log()</Code>
</Flex>
```

### [Variant](#variant)

Use the `variant` prop to control the visual style.

```jsx
<Flex direction="column" align="start" gap="2">
  <Code variant="solid">console.log()</Code>

  <Code variant="soft">console.log()</Code>

  <Code variant="outline">console.log()</Code>

  <Code variant="ghost">console.log()</Code>
</Flex>
```

### [Color](#color)

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx
<Flex direction="column" align="start" gap="2">
  <Code color="indigo">console.log()</Code>

  <Code color="crimson">console.log()</Code>

  <Code color="cyan">console.log()</Code>

  <Code color="orange">console.log()</Code>
</Flex>
```

### [High-contrast](#high-contrast)

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<Flex gap="3">
  <Flex direction="column" align="start" gap="2">
    <Code color="gray" variant="solid">
      console.log()
    </Code>

    <Code color="gray" variant="soft">
      console.log()
    </Code>

    <Code color="gray" variant="outline">
      console.log()
    </Code>

    <Code color="gray" variant="ghost">
      console.log()
    </Code>
  </Flex>

  <Flex direction="column" align="start" gap="2">
    <Code color="gray" variant="solid" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="soft" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="outline" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="ghost" highContrast>
      console.log()
    </Code>
  </Flex>
</Flex>
```

### [Weight](#weight)

Use the `weight` prop to set the text weight.

```jsx
<Flex direction="column" gap="2" align="start">
  <Code weight="regular">console.log()</Code>

  <Code weight="bold">console.log()</Code>
</Flex>
```

### [Truncate](#truncate)

Use the `truncate` prop to truncate text with an ellipsis when it overflows its container.

```jsx
<Flex maxWidth="200px">
  <Code truncate>linear-gradient(red, orange, yellow, green, blue);</Code>
</Flex>
```

<!--$-->

<!--/$-->