CopyButton

Um componente de botão para copiar texto para a área de transferência com feedback visual.

Importação

import { CopyButton } from 'asterui'

Exemplos

Uso Básico

Botão de copiar simples com ícone padrão. Habilite tooltip para feedback visual.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="Hello, World!" />
        <CopyButton text="Copy this text" showTooltip />
      </Space>
    )
}

export default App

Com Conteúdo de Texto

Exibir conteúdo de texto em vez do ícone padrão.

</>

npm install asteruipnpm add asterui

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <CopyButton text="npm install asterui">
          npm install asterui
        </CopyButton>
        <CopyButton text="pnpm add asterui" copiedChildren="Copied!">
          pnpm add asterui
        </CopyButton>
      </Space>
    )
}

export default App

Cores

Aplicar diferentes temas de cor ao botão.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="primary" color="primary" showTooltip />
        <CopyButton text="secondary" color="secondary" showTooltip />
        <CopyButton text="accent" color="accent" showTooltip />
        <CopyButton text="success" color="success" showTooltip />
      </Space>
    )
}

export default App

Variantes

Diferentes variantes de estilo de botão.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="solid" color="primary" />
        <CopyButton text="outline" color="primary" variant="outline" />
        <CopyButton text="ghost" variant="ghost" />
        <CopyButton text="soft" color="primary" variant="soft" />
      </Space>
    )
}

export default App

Tamanhos

Tamanhos de botão disponíveis.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space align="center">
        <CopyButton text="xs" size="xs" />
        <CopyButton text="sm" size="sm" />
        <CopyButton text="md" size="md" />
        <CopyButton text="lg" size="lg" />
        <CopyButton text="xl" size="xl" />
      </Space>
    )
}

export default App

Formas

Formas de botão quadradas e circulares.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="square" shape="square" />
        <CopyButton text="circle" shape="circle" />
      </Space>
    )
}

export default App

Bloco de Código

Botão de copiar posicionado no canto de um bloco de código personalizado.

</>

import { CopyButton } from 'asterui'

export const App = () => (
  <CopyButton text="Hello!" showTooltip />
)

import { CopyButton } from 'asterui'

function App() {
  const codeText = `import { CopyButton } from 'asterui'
  
  export const App = () => (
    <CopyButton text="Hello!" showTooltip />
  )`
  
  return (
      <div style={{ position: 'relative' }} className="bg-base-300 rounded-lg p-4 pr-12">
        <pre className="font-mono text-sm whitespace-pre">{codeText}</pre>
        <div style={{ position: 'absolute', top: 8, right: 8 }}>
          <CopyButton text={codeText} size="sm" variant="ghost" showTooltip />
        </div>
      </div>
    )
}

export default App

Input com Copiar

Copiar o valor de um campo de input.

</>

import { CopyButton, Input } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('https://asterui.com')
  
  return (
      <div className="flex gap-2">
        <Input value={value} onChange={(e) => setValue(e.target.value)} />
        <CopyButton text={value} color="primary" showTooltip />
      </div>
    )
}

export default App

Callbacks

Manipular eventos de sucesso e erro ao copiar.

</>

Copy with callback

import { CopyButton } from 'asterui'

function App() {
  return (
      <CopyButton
        text="Callback example"
        color="primary"
        onCopy={() => console.log('Copied!')}
        onError={(err) => console.error('Failed:', err)}
      >
        Copy with callback
      </CopyButton>
    )
}

export default App

Timeout Personalizado

Controlar por quanto tempo o estado copiado é mostrado.

</>

1s timeout5s timeout

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="1 second" timeout={1000}>1s timeout</CopyButton>
        <CopyButton text="5 seconds" timeout={5000}>5s timeout</CopyButton>
      </Space>
    )
}

export default App

API

CopyButton

Propriedade	Descrição	Tipo	Padrão
text	Texto para copiar para área de transferência	string	-
timeout	Duração em ms para mostrar estado copiado	number	2000
color	Cor do botão	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral'	-
variant	Variante de estilo do botão	'solid' | 'outline' | 'dash' | 'soft' | 'ghost' | 'link'	-
size	Tamanho do botão	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	Forma do botão	'square' | 'circle'	-
icon	Ícone personalizado para estado padrão	ReactNode	Ícone de copiar
copiedIcon	Ícone personalizado para estado copiado	ReactNode	Ícone de check
children	Conteúdo personalizado para estado padrão (sobrescreve icon)	ReactNode	-
copiedChildren	Conteúdo personalizado para estado copiado	ReactNode	-
onCopy	Callback quando a cópia é bem-sucedida	() => void	-
onError	Callback quando a cópia falha	(error: Error) => void	-
showTooltip	Mostrar tooltip com status de cópia	boolean	false
tooltipText	Texto do tooltip para estado padrão	string	'Copy'
copiedTooltipText	Texto do tooltip para estado copiado	string	'Copied!'
disabled	Desabilitar o botão	boolean	false

Acessibilidade

• Usa elemento de botão nativo para suporte de teclado
• Feedback visual através de mudança de ícone e tooltip opcional
• Estado desabilitado é comunicado adequadamente