Hacktron Design System

useCopyToClipboard

Copies text to the clipboard and briefly shows that it worked.

const { copied, copy } = useCopyToClipboard()function onCopy() {  copy('text-text-tertiary')}

Props

Name Type Default
resetDelayMsnumber1500

Guidelines

Do

  • Use it any time a click should copy some text to the clipboard with a brief confirmation - an API key, a token name, a command.
  • Render the copied feedback however fits your surface (swap an icon on a button, flip a Badge to variant="success", change a label to "Copied") - the composable has no UI opinion.

Don't

  • Don't hand-roll navigator.clipboard.writeText + your own timed ref again - that's exactly what this composable replaces.
  • Don't wire up a toast for the confirmation - a copy action is instant and local to the control that triggered it; a toast is for something the user might miss because it happened elsewhere.