复制按钮

复制文本到剪贴板，带有视觉反馈和动画效果。

Loading…

import { CopyButton } from "@/components/copy-button"
 
export function CopyButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <CopyButton variant="secondary" text="Text 1" />
 
      <CopyButton
        className="pr-3 pl-2.5 will-change-transform"
        variant="outline"
        size="default"
        text="Text 2"
      >
        Copy
      </CopyButton>
    </div>
  )
}

特性

使用 Motion 实现平滑的图标过渡和动画状态变化。
三种不同状态的视觉反馈：空闲、成功和错误。
接受字符串或函数以实现动态内容。
支持成功和错误事件的回调。

安装

$ pnpm dlx shadcn@latest add @ncdai/copy-button

用法

import { CopyButton } from "@/components/copy-button"

<CopyButton text="Some text to copy" />

API 参考

CopyButton

在 Button 基础上扩展了剪贴板功能。

Prop

Type

查看 shadcn/ui 文档了解更多信息。