コピーボタンCopyButtonExperimental

状態とバリエーション

プロパティ

使い方

import { CopyButton } from "@gunjo/ui";

export function InstallCommandCopyButton() {
  const command = "npm install @gunjo/ui";

  return (
    <CopyButton
      value={command}
      copyLabel="コマンドをコピー"
      copiedLabel="コピーしました"
      copyFailedLabel="コピーに失敗しました"
      variant="label"
    />
  );
}

• ラベルを動詞で書き、結果で入れ替える。資料は「ボタンのラベルは動詞で書く」を挙げています。この部品は copyLabel・copiedLabel・copyFailedLabel の3つを持ち、押した結果でラベルとアイコンを入れ替えます。既定では5秒（copiedDuration）でもとに戻ります。
• 失敗しても黙らない。クリップボードの API が拒否された場合は、画面外の textarea を使う古いやり方に切り替えます。それでも駄目なら「コピーできません」を出します。押したのに何も起きない、という状態を作らないためです。
• 結果はツールチップではなく role="status" で知らせる。押した後の吹き出しは読み上げ対象の要素で、そのあいだツールチップは出しません。ツールチップはポインタを乗せている人にしか届かないので、押した結果の知らせには使えないからです。
  一般のボタンの設計は UIXHERO の「ボタン」にあります。

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。