Terakhir disalin: —
CopyButton
Tombol salin untuk kode pickup, nomor referensi, atau endpoint API — dengan konfirmasi yang terlihat dan terbacakan.
Dasar
Berikan value. Setelah disalin, ikonnya menjadi centang dan teksnya menjadi copiedLabel selama sekitar 1,6 detik, lalu kembali sendiri. Warna dan variant-nya diteruskan ke Button.
Warnanya tidak berubah saat berhasil — sama seperti tombol salin di dalam CodeBlock. Tombol yang berkedip hijau menarik mata ke tempat yang tidak perlu diperiksa; orang sudah tahu ia baru saja menekannya. Yang berubah warna justru kegagalan, karena itu satu-satunya hasil yang perlu terlihat.
Di samping nilainya
iconOnly untuk tempat sempit: baris tabel, kolom nilai DescriptionList, atau di ujung FormInput. Nama aksesibelnya tetap datang dari label, jadi sebutkan apa yang disalin: “Salin kode referensi”, bukan “Salin”.
https://api.waste4change.com/v1/pickup/PU-0042
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | string | — | Teks yang disalin ke papan klip. |
| label | string | 'Salin' | Teks tombol. Dengan iconOnly, teks ini menjadi nama aksesibelnya. |
| copiedLabel | string | 'Tersalin' | Teks setelah berhasil menyalin. |
| errorLabel | string | 'Gagal menyalin' | Teks bila papan klip menolak, misalnya di halaman yang dibuka lewat http. |
| iconOnly | boolean | false | Hanya ikon, dengan label sebagai nama aksesibelnya. Untuk baris tabel dan kolom nilai yang sempit. |
| icon / copiedIcon | string | 'lucide:copy' / 'lucide:check' | Ikon sebelum dan sesudah berhasil menyalin. |
| color / variant / size | W4cButtonColor / W4cButtonVariant / W4cButtonSize | 'neutral' / 'outline' / 'sm' | Diteruskan ke Button, jadi tombol salin tampil sama dengan tombol lain di sekitarnya. |
| resetAfter | number | 1600 | Berapa lama status tersalin atau gagal bertahan, dalam ms. |
| disabled | boolean | false | Mematikan tombol, misalnya saat nilainya belum ada. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| default | { state, label } | — | Mengganti teks tombol. state bernilai idle, copied, atau error. |
Event copy membawa nilai yang disalin dan apakah berhasil, jadi halaman bisa memunculkan Toast sendiri bila perlu. Hasilnya diumumkan dari role="status" tersembunyi, bukan dengan mengganti nama tombolnya: nama yang berubah di bawah kursor pembaca layar terbaca sebagai kontrol baru.
Papan klip browser butuh konteks aman. Di halaman yang dibuka lewat http — alat internal di jaringan kantor, misalnya — navigator.clipboard tidak tersedia, jadi komponen ini jatuh ke cara lama (execCommand) sebelum menyerah dan menampilkan errorLabel.