Copy Button

文字列をクリップボードへコピーするボタン。押すと少しの間「コピーしました」に変わる。

インポート

import { CopyButton } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { CopyButton } from '@caroainc/ui-components/copy-button'

基本的な使い方

URL・ID・招待コードなど、利用者が別の場所へ貼り付ける文字列の横に置きます。押すとアイコンがチェックに変わり、2秒ほど「コピーしました」と表示します。見た目と大きさはButtonと同じprops（variant / size / shape）で選び、既定はoutlineです。

<CopyButton value={shareUrl} />
<CopyButton value={shareUrl} label="URLをコピー" variant="base" />

{/* アイコンだけ（labelは読み上げ名になる） */}
<CopyButton value={id} shape="square" label="IDをコピー" />

{/* 押したときに文字列を作る（URLの発行など）。結果をトーストで知らせる */}
<CopyButton
  value={async () => (await issueShareUrl()).url}
  label="作成してコピー"
  onCopied={() => toast.success('URLをコピーしました')}
  onCopyError={() => toast.error('コピーできませんでした', { closeButton: true })}
/>

使い分け

文字列を画面にも見せる場合は、読み取り専用のInputやInputGroupの横に置く
コピーの成否を目立たせたい画面では、onCopied / onCopyErrorでトーストを出す（ボタン自体の表示はどちらの場合も変わる）
クリップボードが使えない環境（http・権限なし）ではonCopyErrorが呼ばれる

Props

Buttonのprops（onClick / asChild / loadingを除く）も受け取ります。

Prop	Type	Default	Description
`value`	`string \| (() => string \| Promise<string>)`	`-`	コピーする文字列（必須）。押したときに作る場合は関数
`label`	`string`	`'コピー'`	ボタンの文言。アイコンだけのボタンでは読み上げ名
`copiedLabel`	`string`	`'コピーしました'`	コピーできた直後の文言
`copiedDuration`	`number`	`2000`	「コピーしました」を表示しておく長さ（ミリ秒）
`onCopied`	`(value: string) => void`	`-`	コピーできたとき
`onCopyError`	`(error: unknown) => void`	`-`	文字列の用意・書き込みに失敗したとき
`variant`	`ButtonのVariant`	`'outline'`	ボタンの見た目

Copy Button

インポート

基本的な使い方

使い分け

Props

On this page