CopyButton

テキストをクリップボードにコピーし、コピーしたことを伝えるボタン

インポート

ts
import { CopyButton } from '@k8ordo/ui';

使い方

押すとアイコンが2秒間チェックに変わり（失敗したらエラーのアイコン）、隣のライブリージョンが「コピーしました」を読み上げます。ボタンの名前は変わりません。

tsx
<CopyButton value="pnpm add @k8ordo/ui" label="Copy command" size="sm" />

アイコンだけ

iconOnlyを付けると透明なIconButtonになり、labelはツールチップとアクセシブルネームになります。

tsx
<CopyButton value={code} label="Copy code" iconOnly size="sm" />
<CopyButton value={code} label="Copy code" iconOnly />
<CopyButton value={code} label="Copy code" iconOnly size="lg" />

押したときに中身を作る

valueには関数も渡せ、Promiseを返してもかまいません。関数は押したときに呼ばれ、PromiseはそのままClipboardItemに渡るので、中身が後から届いても書き込みはクリックの中で始まります（Safariはawaitの後に始めた書き込みを拒みます）。

tsx
'use client';

<CopyButton label="Copy link" value={() => window.location.href} />

// A promise is fine too: the write still starts inside the click
<CopyButton
  label="Copy as Markdown"
  value={async () => (await fetch(`/blog/${slug}.md`)).text()}
/>

Props

value
Type: string|(() => string | Promise<string>)
Default: -
disabled?
Type: boolean
Default: false
iconOnly?
Type: boolean
Default: false
label?
Type: string
Default: -
size?
Type: 'sm'|'md'|'lg'
Default: 'md'

Components