定价

CopyButton

Figma 源代码

将文字或代码复制到剪贴板，并提供短暂的成功反馈，适合链接、标识符和安装命令。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于复制内容并显示复制反馈。复用其公开 getText / writeText 入口，不在页面再维护重复的成功状态。

  • 静态内容使用 text，动态内容使用 getText；writeText 可替换实际复制实现。

  • onCopy / onCopyError 处理业务反馈；showText=false 隐藏文字，成功反馈时间由 feedbackDuration 控制。

导入

import { CopyButton } from '@snowui-design-system/components';

用法

变体

API 参考

属性 类型 默认值 示例 描述
text string — text="Example" 要复制的静态文本；getText 存在时优先使用其返回值，两者均未提供时复制空字符串。
getText () => string | Promise<string> — getText={() => 'pnpm add @snowui-design-system/components'} 点击时读取复制内容，可返回 Promise；优先于 text。求值与写入剪贴板均在 pending 阶段，失败进入 onCopyError。
writeText (text: string) => void | Promise<void> writeClipboardText writeText={(value) => { /* handle value */ }} 替换实际复制操作；Promise 完成后显示成功，抛出错误进入失败反馈。用于已有业务复制回调，避免重复写入剪贴板。 默认行为：内置剪贴板写入。
feedbackDuration number 1600 feedbackDuration={42} 复制成功或失败后恢复 idle 的等待时间，单位 ms，负值按 0 处理；pending 与反馈期都忽略重复点击。
showText boolean true showText 显示图标后的 children 或默认复制文字；默认文字随 LocaleProvider 切换，中文“复制”、英文“Copy”；false 时仅显示状态图标；bare 模式无外壳，其余模式启用 Button.iconOnly。
ariaLabel string — ariaLabel="Example" 覆盖可访问名称；纯图标模式默认按成功状态使用 LocaleProvider 的“已复制”/“复制”或“Copied”/“Copy”，带文字模式默认由内容命名。
disabled boolean false disabled 阻止新的复制操作；已开始的异步复制不会因此取消。
children Snippet —（复制） <CopyButton>Content</CopyButton> showText=true 时替换图标后的文字，成功时仍保持该内容；false 时忽略。
icon Snippet —（Copy 图标） icon={iconContent} 替换非成功状态的图标；pending 和 error 仍使用该图标。
successIcon Snippet —（Check 图标） successIcon={successIconContent} 复制成功时的图标内容；优先于 successContent，通过内部状态内容替换显示。
successContent Snippet — successContent={successContentContent} 成功图标区域的替代内容，仅在未提供 successIcon 时使用；不会替换按钮文字。
onCopy (text: string) => void — onCopy={(value) => { /* handle value */ }} 剪贴板写入成功后接收实际复制的文本；此时组件已进入 success 状态。
onCopyError (error: unknown) => void — onCopyError={(value) => { /* handle value */ }} 动态内容读取或剪贴板写入失败时接收错误，组件进入 error 并等待反馈期复位。
onclick (event: MouseEvent) => void — onclick={(value) => { /* handle value */ }} 仅 idle 且未禁用时，在读取文本和复制前调用；preventDefault() 不会取消复制，反馈期内不调用。