Copy to Clipboard Button

A button component that allows users to easily copy text to their clipboard with visual feedback.

Overview

The CopyToClipboardButton is a specialized button component that copies text to the clipboard when clicked. It provides visual feedback to the user by changing its icon and optionally text when the copying action is successful.

It is based on the standard Button component and accepts all its props except for children.

Icon only

import * as UI from "@iyk/ui"

export default () => <UI.CopyToClipboardButton textToCopy="Copy me" kind="shaded" size="md" />

Customize text

import * as UI from "@iyk/ui"

export default () => (
  <UI.CopyToClipboardButton
    textToCopy="Copy me"
    kind="shaded"
    size="md"
    text={{ idle: "Copy text", copied: "Text copied" }}
  />
)