Code block | Quartz design system

Examples

Commands with a hidden key

$npm install @quartz/sdk
added 14 packages in 2s
$npx quartz login --key sk_demo_••••••••••11bb

A file with lines marked

1import {Quartz} from '@quartz/sdk';2const client = new Quartz({apiKey: process.env.QUARTZ_KEY});3// Start a run on the triage agent and wait for it to settle.4const run = await client.runs.create({agent: 'agt_triage01', input: {ticket: 'tkt_4821'}});5const result = await client.runs.wait(run.id, {timeout: 120_000});6console.log(result.status, result.output);

Inline in a sentence

Set retries on agt_triage01.

Styles

1# quartz.yaml2project: helpdesk3agents:4  - id: agt_triage015    model: mdl_fast20256    retries: 2

blockdefault

$quartz evals run refund-policy
Passed 196 of 200 tickets in 41s

command

Sizes

npx quartz login
sm
npx quartz login
defaultdefault

Inline

Set retries to 2.
defaultdefault
Model mdl_fast2025
plain
Open run_8f2a00
kind

States

```
$npx quartz login
```
rest
```
$npx quartz login
```
focus-visible

$export QUARTZ_KEY=sk_demo_••••aaaa

secret hidden

```
$export QUARTZ_KEY=sk_demo_0000aaaa
```
secret shown
```
$npx quartz login
```
copied
```
$npx quartz login
```
copy failed

1# quartz.yaml2project: helpdesk3agents:4  - id: agt_triage015    model: mdl_fast20256    retries: 2

highlighted

1const result = await client.runs.wait('run_8f2a00c4e1b97d3a6f05c2e8b1d4a7f90e3c', {timeout: 120_000, pollInterval: 500, onProgress: event => console.log(event.step, event.status)});

wrapped

Usage

When to use it

Use: A command a person will paste into a terminal.
Use: A file, config or excerpt they read and copy from.
Use: An identifier, path or value inside a sentence, with Code.
Not for: A secret on its own in a form. Use Input.

Rules

10 rules

Never: Put a CodeBlock in a Panel or beside Panels; it is a working surface, white with one grey edge and a rule under its header. Because a surface that scrolls, streams or is read closely needs the white frame's edge to show where it ends, and a white frame in a grey Panel is a box in a box.
Must: Show a command and its output in one variant="command" block with the prompt on commands only. Because a plain block copies the $ and the printed output, so a pasted command fails in the terminal.
Never: Type $ into a plain block; pass the command as command. Because a plain block copies every character, so the $ lands in the clipboard and the shell answers "command not found".
Must: Pass a key or token in a command as secret; copy still takes the real value. A masked key keeps its length: one dot per hidden character. Because without it the key shows in full to anyone looking at the screen or a screenshot of it.
Should: Mark the 1 to 3 lines the text talks about with highlight and set startLine for an excerpt. Because without startLine an excerpt numbers from 1, so the numbers no longer match the file.
Should: Name a file the person creates or edits with filename.
Should: Write example IDs with real prefixes: run_, agt_, key_, dpl_, mdl_. Because the tokenizer underlines those prefixes in their kind, and a bare "123" looks like no ID the API returns.
Must: Pass filename or language on a file block; the scroll body is named from them. Because with neither, the focusable region is named "Text", so a screen reader cannot tell one block from the next.
Never: Add syntax colors to code. Because hue in a block marks a resource ID by its kind, so a purple keyword reads as an agent reference.
Should: Set maxHeight to 480 or link the file for a block longer than 24 lines. Because the block grows to its content, so a long file pushes the rest of the page out of reach.

Accessibility

6 checks

: The block is a figure; the body is a focusable region named by filename, language or "Command".
: Arrows and Page Up or Down scroll the focused body.
: Copy confirms in place and announces "copied"; a refused clipboard announces how to copy by hand.
: Wrap and reveal are toggle buttons with aria-pressed.
: The prompt, line numbers and secret dots are aria-hidden and never selected or copied.
: The code always reads left to right (dir="ltr").

Edge cases

11 edge cases

Long line: Scrolls sideways with the gutter held; wrap breaks anywhere.
One-character command: Keeps the 32px box with copy at the end.
Empty code: Renders one empty line; do not render an empty block.
120px container: The command scrolls in its body; copy stays visible.
Right to left: The chrome mirrors; the code stays left to right.
Zoom 200%: The line height grows with the font; nothing clips.
Heredoc in a command block: The body reads as output; pass command for those.
Ten copies in a second: Each restarts the 1.6s confirm; no flicker.
Secret wider than the line: The dots keep the key's length and the line scrolls; the dots never shrink in a command.
Forced colors: The frame edge draws in CanvasText, Code takes a border, highlights an outline.
Reduced motion: Nothing moves; the copy confirm is a cut.

API

15 props

code: string default ''
variant: 'block' | 'command' default 'block'
command: string | string[]
prompt: string default '$'
secret, defaultRevealed: string, boolean default , false
language: 'ts' | 'tsx' | 'js' | 'json' | 'bash' | 'python' | 'yaml' | 'text' default 'text'
filename, header: string, boolean default , true
lineNumbers, startLine, highlight: boolean, number, number[] | string default true, 1
defaultWrap, maxHeight: boolean, number default false
refs, detectRefs: {text, kind, href?}[], boolean default [], true
size: 'sm' | 'default' default 'default'
copyLabel, onCopy: string, (text) => void default 'Copy code'
Code kind, href, variant: Kind, string, 'default' | 'plain'
kind: Kind
MaskedKey prefix, tail, length: string, string, number default required

Tokens

18 tokens

--line-frame: oklch(var(--ink-c) / var(--line-frame-alpha))
--line-row: oklch(var(--ink-c) / 0.08)
--surface-card: oklch(var(--grey-c))
--code-text: var(--ink)
--type-code: 400 13px/20px var(--font-mono)
--code-string: oklch(var(--ink-c) / var(--code-string-alpha))
--code-comment: oklch(var(--ink-c) / var(--code-comment-alpha))
--weight-strong: 500
--code-prompt: oklch(var(--ink-c) / 0.40)
--accent-wash: var(--surface-selected)
--accent-line: var(--ink)
--accent-mark: var(--ink)
--type-label-sm: 400 12px/16px var(--font-sans)
--type-tag: var(--type-code-sm)
--text-3: oklch(var(--ink-c) / 0.66)
--radius-inner: 4px
--radius-frame: 10px
--features-id: "ss04"

Copy button

By Arlan Marat

141