コピーボタンCopyButton
Experimental

クリップボードへのコピー操作を、ツールチップとコピー済み状態のフィードバック付きで表示します。

状態とバリエーション

スウォッチやツールバーなど狭い場所では、コピー後にチェックアイコンへ切り替え、コピー完了の吹き出しを一時表示します。

コードブロックのように余白がある場所では、押す前から操作名を表示し、コピー後に完了ラベルへ切り替えます。

表は横にスクロールできます

プロパティ	型	初期値	説明
value	string	-	クリップボードへコピーする文字列です。
copyLabel	string	"Copy"	コピー前の aria-label とツールチップです。
copiedLabel	string	"Copied"	コピー後に表示する aria-label とツールチップです。
copyFailedLabel	string	"Copy failed"	コピー失敗時に表示する aria-label とツールチップです。
copiedDuration	number	5000	コピー済みの吹き出し表示を維持する時間です。単位はミリ秒です。
variant	"default" \| "label"	"default"	狭い場所ではアイコンのみ、広い場所ではコピー済みラベルも表示します。
buttonVariant	TooltipButtonProps["variant"]	"ghost"	ボタン表面の見た目を指定します。