Command button

A command chip: a copyable CLI command on terminal-bg. The same component wherever the site shows a command, and, in its large size, the call to action of the landing page’s hero and end. The chip, not a blue button, is what the page asks you to do.

Copyable command

Light

$dta diff

Graphite

$dta diff

Story: /stories/command-button/default/

The call to action

Light

$npm create dta

Graphite

$npm create dta

Story: /stories/command-button/large/

Guidelines

• The $ prompt in terminal-prompt, the command in mono weight 500, a copy icon at the end in the text colour at reduced strength; full strength on hover.
• Clicking copies the command without the $; the icon becomes a tick for 1.6 s and “copied” is announced to screen readers. If the clipboard is not available the announcement says “select to copy”.
• Its accessible name is “Copy: …” followed by the command.
• Two sizes: default (scene commands, 13–14 px) and large (hero and final call, a step more padding and a larger icon).
• Ink on cream in Light, cream on ink in Graphite: the terminal pair, 14:1.
• Pair it with one outline Button at most. No blinking caret.
• In a Preact island (the playground): the styles live in CommandButton.css (classes dta-command, dta-command__prompt, __text, __icon, __copy, __tick, __status, and large), so the CLI hand-off renders the same chip with the same copy behaviour instead of a look of its own. There a long command may wrap, so it never runs past a phone screen.

Tokens used

Read from the component’s source:

--action-subtle--font-mono--radius-md--space-1--space-2--stroke-focus--terminal-bg--terminal-fg--terminal-prompt--type-code-size