CopyButton
Кнопка «копіювати в буфер» зі станом успіху й резервним шляхом копіювання.
Копіювання зворотне тільки тоді, коли користувач його побачив. Кнопка міняє іконку й підпис на «Скопійовано» на дві секунди — абсолютно позиційованим шаром, без стрибка ширини (той самий патерн, що в Button під час loading).
Приклад
В буфері: —
Вигляд: list
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
text* | string | — | Що копіювати. |
label | string | "" | Підпис у спокійному стані. Порожньо — квадратна кнопка з іконкою. |
copiedLabel | string | "Скопійовано" | Підпис після успішного копіювання. |
variant | ghostoutline | "ghost" | Візуальна вага. |
size | smmd | "sm" | Висота кнопки. На мобільному кожен розмір вищий за десктопний. |
ariaLabel | string | undefined | Доступна назва. Обов'язкова, коли `label` не задано. |
Події
| Назва | Payload | Опис |
|---|---|---|
copied | [text: string] | Копіювання вдалося; в payload — скопійований текст. |
failed | [] | Копіювання не вдалося обома шляхами. |
Слоти
| Назва | Опис |
|---|---|
icon | Іконка замість стандартної. |
Коли використовувати
Поруч із командами встановлення, API-ключами, кодами запрошень, посиланнями на спільний документ.
Коли НЕ використовувати
Не всередині іншої кнопки чи посилання (вкладена інтерактивність).
Не для «копіювання всієї сторінки» — користувач має бачити, що саме падає в буфер.
Доступність
Доступна назва через ariaLabel ОБОВ'ЯЗКОВА для іконкової версії.
Успіх показується і кольором, і текстом — не лише галочкою.
Деталі реалізації
navigator.clipboard недоступний на http і кидає NotAllowedError поза фокусом документа, тому другим кроком іде резервне копіювання через прихований textarea — той самий патерн, що в ComponentPreview.