Skip to main content
Digitaltableteur

Design system components

Code

Inline code for a function name, prop, file path or CLI flag inside prose.

Status: beta. Group: display. Markdown version: /design-system/components/code.md

When to use

Code marks a short literal inside running text. Match its size to the text around it: sm beside Body xxs and xs, md beside s and m, lg beside l.

When not to use

  • Do not use for a multi-line block or a command meant to be copied; use CodeBlock or Snippet.
  • Do not use for keyboard keys; that is Kbd.

Look-alikes

  • CodeBlock: Do not use for a multi-line block or a command meant to be copied; use CodeBlock or Snippet.
  • Kbd: Do not use for keyboard keys; that is Kbd.
  • Snippet: Do not use for a multi-line block or a command meant to be copied; use CodeBlock or Snippet.

Props

Code props
PropTypeDefaultDescriptionRequired
size"sm" | "md" | "lg"mdMatch the surrounding text: sm beside Body xxs/xs, md beside s/m, lg beside l.No

Variants

  • Available sizes: sm, md, lg, inherit (default md).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

Code rules
LevelRuleHow it is checked
MUSTARIA: None: static text with code semantics.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-10-25.
SHOULDUse for identifiers, props, file paths, environment variables and CLI flags inside a sentence.Not stated in the contract.
SHOULDKeep it to a few words; a line of code belongs in Snippet or CodeBlock.Not stated in the contract.
SHOULD NOTDo not add a copy button or make it a link target; it is static text.Not stated in the contract.

Install and import

  • Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
  • Import: import { Code } from "@digitaltableteur/react";
  • Entry point: @digitaltableteur/react/content exports it too.
  • Styles: import @digitaltableteur/react/style.css once at the app boundary.
  • Also available as the custom element <dt-code>; see the custom elements manifest.

Links