دکمه کپی (Copy Button)

معرفی

کامپوننت CopyButton یک دکمه آماده برای کپی متن در کلیپ‌بورد است. پس از کپی موفق، آیکون به تیک سبز تبدیل می‌شود و پس از مدت تعیین‌شده به حالت اولیه برمی‌گردد.

چه زمانی استفاده نکنیم:

• برای محتوای غیرمتنی (تصویر، فایل)
• برای متن‌هایی که کاربر باید آن‌ها را ویرایش کند — از Input با select-all استفاده کنید

استفاده

import { CopyButton } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <div className="flex items-center gap-2 p-3 bg-surface-100 rounded-md font-mono text-sm" dir="rtl">
      <span>npm install @parto-system-design/ui</span>
      <CopyButton value="npm install @parto-system-design/ui" />
    </div>
  )
}

انواع

با متن

می‌توانید از children برای افزودن متن در کنار آیکون استفاده کنید.

Props

راهنمای استفاده

دسترسی‌پذیری

• aria-label به‌طور خودکار بین «کپی» و «کپی شد» تغییر می‌کند
• از Clipboard API با fallback برای مرورگرهای قدیمی پشتیبانی می‌کند
• با Tab قابل فوکوس و با Enter یا Space قابل فعال‌سازی است

کامپوننت‌های مرتبط

• Kbd — اگر فقط نیاز به نمایش بصری میانبر صفحه‌کلید دارید، بدون قابلیت کپی
• Button — اگر نیاز به دکمه عمومی با عملکرد سفارشی دارید، نه فقط کپی