跳到正文

CopyButton 复制按钮

CopyButton 把一段文字放进剪贴板。复制成功后显示两秒对勾,再换回复制图标。不给标签时只显示图标。

演示

基础用法

没有子元素时按钮只显示图标,名称取自语言包的“复制”。

带标签

子元素作为图标旁的可见标签。

尺寸

高度与同尺寸的 Button 一致。

用函数提供文字

text 可以是函数,点击时才调用,所以能读到最新的值。剪贴板接受后以复制的文字调用 onCopy;失败时以错误调用 onError。

禁用

无障碍

CopyButton 是原生的 button type="button",空格和回车都能复制。只有图标时,用语言包的“复制”(或你的 aria-label)命名;带标签时由标签命名。复制成功后,名称在 copiedDuration 内变为语言包的“已复制”,读屏软件能听到结果。图标对辅助技术隐藏。

Props

名称类型默认值说明版本
textstring | (() => string)必填要复制的文字,或在点击时返回文字的函数。未发布
onCopy(text: string) => voidundefined剪贴板接受后以复制的文字调用。未发布
onError(error: unknown) => voidundefined剪贴板不可用或拒绝时调用。未发布
copiedDurationnumber2000已复制状态持续的毫秒数。未发布
sizesmall | medium | largemedium按钮尺寸。未发布
iconReactNode复制图标替换复制图标。未发布
copiedIconReactNode对勾图标替换复制成功后的对勾。未发布
childrenReactNodeundefined可见标签;不传时只显示图标。未发布
aria-labelstring只有图标时为语言包的“复制”空闲时按钮的名称;复制成功后读作语言包的“已复制”。未发布
disabledbooleanfalse禁用按钮。未发布

CopyButton 也接受原生 button 属性和 ref。可以通过 --r-copy-button-* token 调整样式。