Copy Button

Copies a string to the clipboard and swaps to a check while the write succeeds.

Default


        
          1
          
          <CopyButton text-to-copy="pnpm add nuxt" label="Copy install command" />

Beside a value

The control is icon-only. Sit it next to the string it copies and keep the aria-label specific.

dpl_7f3a91c2


        
          1
          
          <div class="flex items-center gap-1">
        

          2
          
            <code>dpl_7f3a91c2</code>
        

          3
          
            <CopyButton text-to-copy="dpl_7f3a91c2" label="Copy deployment id" />
        

          4
          
          </div>

Disabled


        
          1
          
          <CopyButton text-to-copy="sk_live_hidden" label="Copy secret" disabled />

Controlled

Pass copied when the parent owns the check. Uncontrolled mode resets after one second and still emits copy.


        
          1
          
          <CopyButton
        

          2
          
            text-to-copy="sk_live_example"
        

          3
          
            label="Copy secret"
        

          4
          
            :copied="pinned"
        

          5
          
            @copy="pinned = true"
        

          6
          
          />

Best practices

textToCopy is the clipboard payload. The visible label next to the button can be a truncated or masked form of the same value.
label becomes aria-label. Default is Copy. Prefer Copy deployment id when more than one copy control shares the view.
Leave copied unset for the built-in one-second check. Control it only when success must stay visible or sync with another surface.
Disable when there is nothing to copy yet (empty field, hidden secret). Do not disable after a successful copy.
A whole command line with a prompt glyph is Snippet. A highlighted source file is Code Block — both already embed this button.
The icon is decorative. Do not add a visible “Copied” word next to it; the check is the feedback.