<!-- Protocore Design System — Code -->
# Code

- **Category:** Typography (`typography`)
- **Slug:** `typography/code`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Code } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/typography/code

> Inline code — mono on a sunken surface with a subtle hairline.

## When to use it

Use `Code` for a short literal that appears *inside* prose — a function name, a config key, a value, a path. It signals "this is exactly as typed."

For a multi-line snippet, a command, or anything the reader might copy wholesale, use `CodeBlock`, which gives you a panel with an optional title bar and comment/literal styling. For a *keyboard shortcut* rather than code, use `Kbd`, which renders a raised key-cap instead of a sunken chip. `Code` is strictly the inline case.

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `style` | `CSSProperties` | no | — | — |

## Examples

### Basics

`Code` renders a `<code>` element on a sunken surface with a hairline border — for a literal token inside a sentence.

```tsx
import { Code, Text } from "@protocore/pds";

export default function CodeBasics() {
  return (
    <Text>
      Call <Code>endpoint.send(dstEid, message)</Code> to dispatch a cross-chain packet.
    </Text>
  );
}
```

### Inline in prose

Wrap individual identifiers, values, or field names as they appear in running text; each keeps the mono family and the sunken chip.

```tsx
import { Code, Text } from "@protocore/pds";

export default function CodeInline() {
  return (
    <Text>
      Set the <Code>confirmations</Code> field on your <Code>DVNConfig</Code> to raise the security
      threshold; the default is <Code>15</Code>.
    </Text>
  );
}
```

## Guidelines

**Do**

- Use `Code` for inline literals — identifiers, keys, values, paths.
- Keep the contents to a single short token or expression.
- Nest it inside `Text` so it inherits the paragraph flow.
- Use it for the exact-as-typed spelling of a thing.

**Don't**

- Don't use it for multi-line snippets — that is `CodeBlock`.
- Don't use it for keyboard shortcuts — that is `Kbd`.
- Don't wrap prose or emphasis in it; it means "literal code."
- Don't nest a `Code` inside another `Code`.

## Accessibility

**Notes**

- Renders a semantic `<code>` element, correctly conveying inline code to assistive tech.
- The sunken surface and mono family are the visual cue; the semantics don't depend on colour.
- Contents are selectable and copyable as normal inline text.

## Related

`code-block`, `kbd`, `text`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/