Composant · Action

CopyButton

Stable

Bouton dédié à la copie d'une valeur dans le presse-papier, avec retour visuel temporaire et icônes Lucide.

Exemples

Tailles

Voir le code (Svelte)

<CopyButton
  value="npm install @sentropic/design-system-svelte"
  size="sm"
  label="Copier"
  copiedLabel="Copié"
/>
<CopyButton
  value="npm install @sentropic/design-system-svelte"
  size="md"
  label="Copier"
  copiedLabel="Copié"
/>
<CopyButton
  value="npm install @sentropic/design-system-svelte"
  size="lg"
  label="Copier"
  copiedLabel="Copié"
/>

Copier différentes valeurs

Voir le code (Svelte)

<CopyButton value="sent-tech.ca" label="Copier le domaine" copiedLabel="Copié" />
<CopyButton
  value="[email protected]"
  label="Copier l'email"
  copiedLabel="Copié"
/>
<CopyButton value="ST-2026-0001" label="Copier l'identifiant" copiedLabel="Copié" />

États

Voir le code (Svelte)

<CopyButton value="désactivé" label="Désactivé" copiedLabel="Copié" disabled />

API

Prop	Type	Default
`value`	`string`	required
`label`	`string`	`"Copy"`
`copiedLabel`	`string`	`"Copied"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`feedbackTimeoutMs`	`number`	`1500`
`onCopied`	`(value: string) => void`	optionnel
`onError`	`(err: unknown) => void`	optionnel
`disabled`	`boolean`	`false`

Le bouton utilise navigator.clipboard.writeText et bascule l'icône Lucide Copy vers Check pendant feedbackTimeoutMs millisecondes, avec aria-live="polite" pour annoncer l'état copié.

Tokens utilisés

--st-component-control-hoverBorder
--st-component-control-hoverBackground