Code

Install and import

Code is in @dovetail-ds/react. Install it with React, if you haven't:

Guidelines

Marks text that must be read literally: token names, file paths, commands, snippets.

Rules

• Inline code does not wrap. Keep it to a short identifier; a whole command belongs in a block.
• Give every block a label when the snippet belongs to a file. A snippet with no filename is hard to act on.
• Do not syntax-highlight. This component ships one colour on purpose; highlighting is a product decision and a dependency, not a system default.
• Never put code in a Prose paragraph without this component. Proportional digits and ligatures change what the reader copies.

Tradeoffs

Blocks scroll horizontally rather than wrap, because a wrapped command can be copied incorrectly. That costs the reader a scroll on narrow screens.

Props

The typed contract, from Code.d.ts.

import * as React from "react";

/** Monospace code, inline or as a block. */
export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
  children?: React.ReactNode;
  /** Renders a scrollable <pre> block instead of inline <code>. @default false */
  block?: boolean;
  /** Caption above a block, e.g. a filename. Ignored when inline. */
  label?: React.ReactNode;
}

export declare function Code(props: CodeProps): React.JSX.Element;

Tokens it reads

Every custom property Code.jsx resolves, read from the source: 12 semantic, 1 primitive, 1 undeclared. Component tier first, because that is the one to reach for.

Open the graph

• semantic Shared roles. Override one and everything using that role moves with it.
• primitive Raw values. A component reading one directly is a deliberate exception.
• none Referenced by the source but declared by no tier, so it resolves to nothing.

Source

React only, no dependencies, every value a token.

import React from "react";

export function Code({ children, block = false, label, style, ...rest }) {
  const shared = {
    fontFamily: "var(--dt-font-family-mono)",
    fontSize: "var(--dt-text-body-sm-size)",
    color: "var(--dt-text-primary)",
    background: "var(--dt-surface-sunken)",
    border: "var(--dt-border-width-default) solid var(--dt-border-subtle)",
  };
  if (!block) {
    return <code style={{ ...shared, padding: "1px var(--dt-space-inset-2xs, 4px)", borderRadius: "var(--dt-radius-control)", whiteSpace: "nowrap", ...style }} {...rest}>{children}</code>;
  }
  return (
    <figure style={{ margin: 0, display: "flex", flexDirection: "column", gap: "var(--dt-space-stack-2xs)", ...style }} {...rest}>
      {label && <figcaption style={{ fontFamily: "var(--dt-font-family-mono)", fontSize: "var(--dt-text-body-xs-size)", color: "var(--dt-text-tertiary)" }}>{label}</figcaption>}
      <pre style={{
        ...shared, margin: 0, padding: "var(--dt-space-inset-md)", borderRadius: "var(--dt-radius-container)",
        overflowX: "auto", lineHeight: "var(--dt-line-height-relaxed, 1.6)",
      }}><code>{children}</code></pre>
    </figure>
  );
}

In context

Code also appears on the display reference cards, alongside the rest of its family.

• DisplayDetail
• SurfacesDetail