Componentes/CopyButton

CopyButton

Botão de copiar para clipboard com feedback visual. Ícone copy → check ao clicar, com transição de cor. 2 tamanhos (default 28px, sm 20px).

Outros

Figma: —

Preview

Default (28px)

Small (20px)

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- Default -->
<button class="trdr-copy-btn" title="Copiar">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
  </svg>
</button>

<!-- Small -->
<button class="trdr-copy-btn trdr-copy-btn-sm" title="Copiar">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
  </svg>
</button>

<!-- Estado copiado (class .copied) -->
<button class="trdr-copy-btn copied" title="Copiado!">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="20 6 9 17 4 12" />
  </svg>
</button>

Dimensões

Variante	Largura	Altura
Default	`28px`	`28px`
Small	`20px`	`20px`

Props / Variantes

Prop	Tipo	Valores
`Size`	enum	`DefaultSmall`
`State`	enum	`IdleCopied`

Tokens Utilizados

Propriedade	Token	Valor
Icon color	`content-tertiary`	`#A4A4A4`
Icon hover	`content-primary`	`#FFFFFF`
BG hover	`surface-secondary`	`#222222`
Border hover	`border-default`	`#4A4A4A`
Copied color	`content-success`	`#4FE290`
Copied BG	`surface-success`	`#4FE29014`
Copied border	`content-success`	`#4FE290`
Border radius	`radius-sm`	`4px`

Anatomia

[button.trdr-copy-btn .trdr-copy-btn-sm?]
  └── [svg 14×14 (default) / 12×12 (sm)]
        ├── idle: ícone copy (rect + path)
        └── copied: ícone check (polyline)

Default: 28×28px, border-radius radius-sm, bg transparent, border 1px transparent
Small: 20×20px, svg 12×12px
Hover: icon primary, bg surface-secondary, border border-default
Copied: icon + border content-success, bg surface-success — auto-reset 1.5s