CopyButton.tsx

import {
  Box,
  IconButton,
  IconButtonProps,
  Tooltip,
  useClipboard,
} from "@chakra-ui/react";
import React from "react";

import { BiCopy as CopyIcon, BiCheck as CopiedIcon } from "react-icons/bi";

interface CopyButtonProps extends Omit<IconButtonProps, "aria-label"> {
  value: string;
}

const CopyButton = ({ value, ...otherProps }: CopyButtonProps) => {
  const clipboard = useClipboard(value);
  return (
    <Tooltip
      label={clipboard.hasCopied ? "Copied!" : "Copy"}
      closeOnClick={false}
    >
      <Box display="inline-block">
        <IconButton
          {...otherProps}
          aria-label="Copy"
          icon={
            clipboard.hasCopied ? (
              <CopiedIcon fontSize="0.66em" />
            ) : (
              <CopyIcon fontSize="0.66em" />
            )
          }
          onClick={clipboard.onCopy}
          _active={{ transform: "scale(0.93)" }}
        />
      </Box>
    </Tooltip>
  );
};

export default CopyButton;