コピーボタン
Copy button
別名: コピーボックス、コードコピーボタン、Copy box、Copy to clipboard button
生態（さわってみる）
一言定義
ワンクリックで対象のテキストをクリップボードにコピーし、完了をその場でフィードバックするボタンUI。
分類
使う場面
- APIキー・招待URL・コードスニペットなど、正確な貼り付けが必要な短いテキストを渡すとき
- 手動でのドラッグ選択＋コピーの手間を1クリックで代替したいとき
避ける場面
- コピー対象が長文で、部分的な選択の方が実用的なとき
- clipboard APIが使えない環境を主要ターゲットにするとき（テキスト選択を主体にしたUIを優先する）
近縁種との比較
コピーボタンはクリック一つでテキストをクリップボードへコピーし、コピー完了という一過性の状態 変化を即座にフィードバックする特化型のボタンである。通常のボタンが画面遷移やデータ送信など持 続的な結果を伴うのに対し、コピーボタンの結果は「クリップボードの中身が変わった」という視覚的に確 認しづらい副作用であるため、「コピーしました」のようなテキストフィードバックが省略できない点が設 計上の最大の違いである。いいねボタンも同様にクリック後の状態変化をその場で示す特化型ボタンだ が、いいねボタンは状態がオン/オフのトグルとして永続するのに対し、コピーボタンは一定時間で元の表 示に戻る一過性のフィードバックである点で異なる。
実例リンク
アクセシビリティ
- role
- button。コピー結果は別要素の role="status" + aria-live="polite" で通知する（ボタン自体にaria-pressedは付けない。トグルではなく一過性の操作のため）
- キーボード操作
- Tabで到達、Enter/Spaceでコピー実行
- 補足
- navigator.clipboard.writeText が使えない環境（非HTTPS・非対応ブラウザ）では、テキストを選択状態にして手動コピーを促すフォールバック文言を表示する