Code (inline)

Inline code styling. Uses the native <code> element for semantic correctness. Copyable by default — hovering reveals a copy button, and clicking it copies the element's text content to the clipboard.

When to use

• Inline references to identifiers, commands, file paths inside prose.
• Snippets short enough to read in flow.

For multi-line code blocks with syntax highlighting and a chrome of its own, use Code block (Blocks layer, ships in v1.0 alongside the docs portal).

Variants

Copyable behavior

Code is copyable by default per v1-master-diff-merge §4.8. The @malevich/components runtime discovers [data-copyable="true"] elements at init() time and wires up the copy button.

• Default (copyable): <code class="code">npm install malevich</code>
• Opt out: <code class="code" data-copyable="false">just text</code>

The copy button is hidden until the user hovers or focuses the host. On click, the element's textContent is written to the clipboard via the Clipboard API. The button morphs from a copy icon to a checkmark for 1.5 seconds, then reverts. An aria-live region announces "Copied" to assistive technology.

If the Clipboard API is unavailable, the button is not rendered and the component falls back to plain inline code.

Anatomy

<!-- Default: copyable on hover -->
<code class="code">npm install malevich</code>

<!-- Inside a paragraph -->
<p>Run <code class="code">pnpm dev</code> to start the dev server.</p>

<!-- Opted out of copy -->
<code class="code" data-copyable="false">just a label</code>

<!-- Variants -->
<code class="code -accent">malevich</code>
<code class="code -danger">--no-verify</code>
<code class="code -muted">deprecated-flag</code>

The runtime injects an overlay button:

<code class="code" data-copyable="true" data-malevich-copyable-ready="true">
  npm install malevich
  <button class="malevich-copyable__button" type="button" aria-label="Copy to clipboard">
    <svg>…</svg>
  </button>
  <span class="malevich-copyable__live" aria-live="polite" aria-atomic="true"></span>
</code>

Authors should not pre-author the button; it is the runtime's responsibility.

Tokens used

From semantic tier

• --color-surface-raised — background
• --color-surface-canvas — muted variant background
• --color-accent-muted — accent variant background + border
• --color-accent-strong — accent variant text
• --color-ink-strong — default text
• --color-ink-regular — muted variant text
• --color-danger — danger variant text + border
• --color-border-muted — default and muted borders
• --space-inset-element-s / -m / -l — padding
• --radius-tag — corner radius
• --border-width-hairline — border thickness
• --font-mono-m-* — typography

Accessibility

<code> carries an implicit semantic role and is the correct element for inline code.

The copy button is fully keyboard accessible: it receives focus via tab order, has aria-label="Copy to clipboard", and triggers on Enter/Space (browser default for <button>). After a successful copy, its label updates to "Copied" and a polite aria-live region announces the result.

The button is visible only on hover, focus-within, or when the button itself has focus — so keyboard users discover it via tabbing.

The host's data-copied="true" attribute is removed after 1.5s; CSS applies a success color tint during that window.

Edge cases

• Clipboard unavailable: the button is not injected. Code renders as plain inline code without copy affordance.
• Long code: the component uses white-space: nowrap so the code itself does not wrap. Authors who want wrapping override with white-space: normal locally.
• Nested in muted prose: use .-muted to keep visual rhythm.
• Inside a button or link: wrapping a <code> inside an interactive element is allowed, but data-copyable="false" should be set so the inner button does not trap clicks intended for the outer interactive.

Do

• Use <code> as the tag.
• Let the runtime own the copy button — don't author it manually.
• Use data-copyable="false" for cases where the code is illustrative and the copy button would clutter (very short tokens inside dense prose, sidebar references).

Don't

• Don't use <code> for keyboard shortcuts. Use <kbd> instead — see kbd.docs.md.
• Don't override the monospace font. It is a recognition cue.
• Don't combine .code with <pre>. For multi-line code use Code block (a separate component).