# Code

An inline code component for displaying short code snippets or technical terms within running text. Renders as a styled `<code>` element with monospace typography.

```tsx demo
import { Code } from "@tenstorrent/vesper/code";
import { Typography } from "@tenstorrent/vesper/typography";

export default function CodeDemo() {
  return (
    <Typography variant="copy-md">
      Use the <Code>Code</Code> component to highlight inline code.
    </Typography>
  );
}
```

## Options

| Prop       | Type                      | Description                         | Default     |
| ---------- | ------------------------- | ----------------------------------- | ----------- |
| `variant`  | `"default" \| "contrast"` | The visual style variant to render. | `"default"` |
| `children` | `ReactNode`               | The inline code content.            | —           |

Any additional props are forwarded to the underlying `<code>` element.

## Examples

### Basic usage

Use `<Code>` as you would use the `<code>` element by wrapping inline code strings:

```tsx demo
import { Code } from "@tenstorrent/vesper/code";
import { Typography } from "@tenstorrent/vesper/typography";

export default function BasicCode() {
  return (
    <Typography variant="copy-md">
      Run <Code>yarn install</Code> to get started.
    </Typography>
  );
}
```

### Variants

`Code` can be rendered in one of two variants: `"default"` or `"contrast"`. Use the `"contrast"` variant to render inline `Code` with increased contrast:

```tsx demo
import { Code } from "@tenstorrent/vesper/code";
import { Typography } from "@tenstorrent/vesper/typography";

export default function CodeVariants() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "var(--vesper-spacing-2)",
      }}
    >
      <Typography variant="copy-md">
        Run <Code variant="default">yarn install</Code> to get started.
      </Typography>
      <Typography variant="copy-md">
        Run <Code variant="contrast">yarn install</Code> to get started.
      </Typography>
    </div>
  );
}
```