Skip to main content
Digitaltableteur

Design system components

Snippet

A copyable shell command with a prompt that stays out of the copy.

Status: beta. Group: structure. Markdown version: /design-system/components/snippet.md

When to use

Snippet holds a command the reader will paste into a terminal. Pass the bare command: the prompt is drawn for you and never copied. Several commands render one per line and copy together.

When not to use

  • Do not use for multi-line source code or command output; use CodeBlock.

Look-alikes

  • Code: Do not use for a multi-line block or a command meant to be copied; use CodeBlock or Snippet.
  • CodeBlock: Do not put source files or output in a Snippet; use CodeBlock.

Props

Snippet props
PropTypeDefaultDescriptionRequired
commandstring | readonly string[]noneThe command, or several commands shown one per line. Write the command only: the prompt is chrome and never part of the text.Yes
promptbooleantrueShow the $ prompt before each command. Copy always leaves it out.No
theme"default" | "inverted"defaultinverted renders the snippet in the dark theme on any page, for terminal emphasis. In the high-contrast themes it follows the page so contrast stays at the high-contrast level.No
copyablebooleantrueShow the copy button.No
copyLabelstring"Copy code" (translated)Accessible name for the copy button.No
onCopy(text: string) => voidnoneCalled with the copied text (commands joined by newlines).No

Variants

  • Available themes: default, inverted (default default).

Invalid combinations

The contract records no invalid combinations.

Keyboard

Snippet keyboard behaviour
KeyBehaviour
TabReaches the copy button.
Enter or SpaceCopies the commands without the prompt.

Rules

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

Snippet rules
LevelRuleHow it is checked
MUSTARIA: The $ prompt is aria-hidden chrome; screen readers hear only the command.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Each command is a code element; the copy button is named "Copy code" by default.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.
MUSTEvery documented keyboard interaction works as specified.Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-10-25.
SHOULDWrite the command only; the component draws the $ prompt.Not stated in the contract.
SHOULDUse inverted for terminal emphasis on a light page.Not stated in the contract.
SHOULD NOTDo not type $ into command; it would copy and render twice.Not stated in the contract.
SHOULD NOTDo not put source files or output in a Snippet; use CodeBlock.Not stated in the contract.

Install and import

  • Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
  • Import: import { Snippet } 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-snippet>; see the custom elements manifest.

Links