CopyButton

Un componente de botón para copiar texto al portapapeles con retroalimentación visual.

Importar

import { CopyButton } from 'asterui'

Ejemplos

Uso Básico

Botón de copiar simple con icono predeterminado. Habilita tooltip para retroalimentación visual.

import { CopyButton, Space } from 'asterui'

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

export default App

Con Contenido de Texto

Muestra contenido de texto en lugar del icono predeterminado.

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

Colores

Aplica diferentes temas de color al botón.

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ón.

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

Tamaños

Tamaños de botón disponibles.

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ón cuadrado y circular.

import { CopyButton, Space } from 'asterui'

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

export default App

Bloque de Código

Botón de copiar posicionado en la esquina de un bloque 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 con Copiar

Copia el valor de un campo de entrada.

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

Maneja eventos de éxito y error de copia.

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

Controla cuánto tiempo se muestra el estado de copiado.

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`

Propiedad	Descripción	Tipo	Predeterminado
`text`	Texto a copiar al portapapeles	`string`	-
`timeout`	Duración en ms para mostrar estado de copiado	`number`	`2000`
`color`	Color del botón	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	-
`variant`	Variante de estilo del botón	`'solid' \| 'outline' \| 'dash' \| 'soft' \| 'ghost' \| 'link'`	-
`size`	Tamaño del botón	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`shape`	Forma del botón	`'square' \| 'circle'`	-
`icon`	Icono personalizado para estado predeterminado	`ReactNode`	Icono de copiar
`copiedIcon`	Icono personalizado para estado de copiado	`ReactNode`	Icono de check
`children`	Contenido personalizado para estado predeterminado (sobrescribe icon)	`ReactNode`	-
`copiedChildren`	Contenido personalizado para estado de copiado	`ReactNode`	-
`onCopy`	Callback cuando la copia tiene éxito	`() => void`	-
`onError`	Callback cuando la copia falla	`(error: Error) => void`	-
`showTooltip`	Mostrar tooltip con estado de copia	`boolean`	`false`
`tooltipText`	Texto del tooltip para estado predeterminado	`string`	`'Copy'`
`copiedTooltipText`	Texto del tooltip para estado de copiado	`string`	`'Copied!'`
`disabled`	Deshabilitar el botón	`boolean`	`false`

Accesibilidad

Usa elemento de botón nativo para soporte de teclado
Retroalimentación visual a través de cambio de icono y tooltip opcional
El estado deshabilitado se comunica adecuadamente