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