CopyButton

Un composant bouton pour copier du texte dans le presse-papiers avec retour visuel.

Import

import { CopyButton } from 'asterui'

Exemples

Utilisation de base

Bouton de copie simple avec icône par défaut. Activer l'info-bulle pour un retour visuel.

import { CopyButton, Space } from 'asterui'

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

export default App

Avec contenu texte

Afficher du contenu texte au lieu de l'icône par défaut.

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

Couleurs

Appliquer différents thèmes de couleur au bouton.

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

Différentes variantes de style de bouton.

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

Tailles

Tailles de bouton 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

Formes

Formes de bouton carré et cercle.

import { CopyButton, Space } from 'asterui'

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

export default App

Bloc de code

Bouton de copie positionné dans le coin d'un bloc de code personnalisé.

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

Entrée avec copie

Copier la valeur d'un champ d'entrée.

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

Gérer les événements de succès et d'erreur de copie.

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

Délai personnalisé

Contrôler la durée d'affichage de l'état copié.

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`

Propriété	Description	Type	Défaut
`text`	Texte à copier dans le presse-papiers	`string`	-
`timeout`	Durée en ms pour afficher l’état copié	`number`	`2000`
`color`	Couleur du bouton	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	-
`variant`	Variante de style de bouton	`'solid' \| 'outline' \| 'dash' \| 'soft' \| 'ghost' \| 'link'`	-
`size`	Taille du bouton	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`shape`	Forme du bouton	`'square' \| 'circle'`	-
`icon`	Icône personnalisée pour l’état par défaut	`ReactNode`	Icône de copie
`copiedIcon`	Icône personnalisée pour l’état copié	`ReactNode`	Icône de coche
`children`	Contenu personnalisé pour l’état par défaut (remplace l’icône)	`ReactNode`	-
`copiedChildren`	Contenu personnalisé pour l’état copié	`ReactNode`	-
`onCopy`	Callback lors du succès de la copie	`() => void`	-
`onError`	Callback lors de l’échec de la copie	`(error: Error) => void`	-
`showTooltip`	Afficher l’info-bulle avec l’état de copie	`boolean`	`false`
`tooltipText`	Texte de l’info-bulle pour l’état par défaut	`string`	`'Copy'`
`copiedTooltipText`	Texte de l’info-bulle pour l’état copié	`string`	`'Copied!'`
`disabled`	Désactiver le bouton	`boolean`	`false`

Accessibilité

Utilise l’élément bouton natif pour le support du clavier
Retour visuel via changement d’icône et info-bulle optionnelle
L’état désactivé est correctement communiqué