Code block | Glaze design system

Styles

When to use it

Use: A file or an excerpt to read or copy: an API call, a config, a prompt template.
Use: A command to paste into a shell, with or without what it prints.
Not for: Structured output to fold and search, such as a tool result. Use JSON view.
Not for: An ID or a path inside a sentence; write it in <code>. Use Truncate.

7 rules

Must: Show shell commands with variant="command" and their prompt, never a $ typed into a block. Because the command variant keeps the prompt and the printed output out of the copy, so a pasted command runs as is.
Must: Pass a key inside a command as secret, so it shows as dots and still copies whole. Because a key in plain sight ends up in screenshots and screen shares, and a masked one that copied dots would not run.
Never: Colour syntax with hues or a theme from another library. Because colour means status in Glaze, so a green string reads as a pass; the tokens are ink at its steps.
Never: Set code in font-mono at the sans size or restyle the block's type. Because the block sets type-code-block, 12px on a 20px line, sized for reading code line by line; a sans-sized mono reads a size bigger and a smaller one strains.
Should: Give a file its filename; the language label is the fallback. Because the filename says where the code goes, which a language name does not.
Should: Highlight the lines the text talks about with highlight, never with a bar or a colour. Because the pressed wash marks them in ink and a screen reader hears "Highlighted".
Should: Set maxLines on code longer than about 30 lines, or link to the file. Because a 200-line block pushes everything after it off the screen.

4 checks

: The body is a focusable region named by the filename or the language, so a keyboard can scroll it.
: Copy says "Copied" or "Copy failed" once in a status region; the button keeps its name.
: Line numbers and the prompt are aria-hidden and unselectable; a hidden secret reads "hidden secret".
: Code text is text-1 and text-2 on --code-surface (paper), 5.5:1 or better in both themes.

3 keys

5 edge cases

Long line: Scrolls sideways; wrap breaks it anywhere instead.
Clipboard refused: The button says Copy failed and the code stays selectable.
Right to left page: Code stays left to right.
Narrow at 390: The language label hides; the filename truncates; the body scrolls.
Dark theme: The surface is the dark panel with its hairline; the ink steps flip with the tokens.

11 props

code: string
variant: 'block' | 'command' default 'block'
language: 'ts' | 'tsx' | 'js' | 'json' | 'bash' | 'python' | 'yaml' | 'text' default 'text'
filename: string
header: boolean default true
lineNumbers: boolean default false
highlight: number[] | string
defaultWrap: boolean default false
prompt: string default '$'
secret: string
maxLines: number

10 tokens