CopyButton
Botão ghost que copia um valor para a área de transferência e exibe um check por 2s.
Carregando...
Instalação
npx @kobana/ui add copy-buttonDependências instaladas automaticamente: button (shadcn/ui), lucide-react
Importação
import { CopyButton } from "@/components/kobana/copy-button"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
value | string | — | Valor copiado para a área de transferência ao clicar |
size | "default" | "sm" | "lg" | "icon" | "icon" | Tamanho do botão (mapeado para os tamanhos do shadcn button) |
label | string | — | Texto opcional renderizado ao lado do ícone. Sem valor, o botão fica apenas com o ícone |
className | string | — | Classes adicionais aplicadas ao botão |
Uso
<CopyButton value="kbn_sk_a1b2c3d4e5f6g7h8i9j0k1l2" />Com texto ao lado do ícone:
<CopyButton value="000.000.000-00" label="Copiar CPF" size="sm" />Ao clicar, o valor é copiado via navigator.clipboard e o ícone exibe um check verde por 2 segundos antes de voltar ao ícone de cópia. Ideal para chaves de API, tokens, documentos e qualquer valor que o usuário precise copiar rapidamente.