Copy button
Copies a text to the clipboard and says so. In the playground every output file and the generated dta.config.ts have one, in their row and in the preview. Commands are not copied with it: a command is a Command button.
When to use
Section titled “When to use”- Next to something whose text the visitor may want in their own editor: a file, a config.
- Not for commands (the command chip copies itself) and not as the only way to get a file: pair it with Download.
Copy, copied, and the outline variant
Light
Graphite
Story: /stories/copy-button/states/
Not copied: the error square, at the same width
Light
Graphite
Story: /stories/copy-button/failed/
Guidelines
Section titled “Guidelines”- It is the Button (
Button.css), quiet by default (the small action repeated on every row), outline where it stands alone (the preview). - After copying, the label reads “Copied” for 1.6 s, after the pass dot in
status-success-marker. When the browser refuses, it reads “Not copied” after the error square instatus-error-marker, the same 6 px shape as in Findings (see Status colours): shape and word, never colour alone, and the word keeps the button’s ink. The screen reader hears “Not copied: select the text”. - All three labels (“Copy”, “Copied”, “Not copied”) share one grid cell, the hidden ones invisible but measured, so the button is as wide as the widest from the start: the width never changes and nothing moves, whatever the result.
- A polite live region announces the result. When the visible label alone does not say what is copied, the accessible name does and starts with it: “Copy output/css/base.css”.
- A Preact component; stories render it to static HTML (
staticStateshows the copied or the failed state).
Tokens used
Section titled “Tokens used”Read from the component’s source:
--radius-full--space-2--status-error-marker--status-success-marker