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.

Use the Code component to highlight inline code.

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:

Run yarn install to get started.

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:

Run yarn install to get started.

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>
  );
}