CopyButton

Тонкая обёртка над Button (view='function', appearance='neutral'), которая копирует строку или число в системный буфер обмена и на 1 секунду показывает иконку-галочку как подтверждение действия.

Демо

<CopyButton size="s" valueToCopy="example-value" />

Когда использовать

• Рядом с identifier-ами, токенами, IP, URL — когда нужно одно действие «скопировать» без визуального шума.
• В таблицах, тулбарах, ячейках карточек — где места хватает только под иконку.
• Для составных строк нужна и подпись, и кнопка:
  • используйте CopyLine.

Анатомия

Size (default s)

Размер задаётся пропом size и пробрасывается в нижележащий Button:

• s — для плотных поверхностей и таблиц.
• m — дефолт форм.
• l — для крупных карточек.

Label (default отсутствует)

Необязательный проп label добавляет текст рядом с иконкой — кнопка перестаёт быть icon-only. Если label не задан, кнопка отображается только с иконкой и получает aria-label='Copy' для доступности; при наличии label атрибут не выставляется (текст уже доступен ассистивным технологиям).

State

Состояние подтверждения управляется внутренним хуком useCopyToClipboard: после успешного navigator.clipboard.writeText иконка CopySVG на 1 секунду заменяется на CheckSVG, затем возвращается обратно. Внешним пропсом не управляется.

Установка

pnpm add @cloud-ru/ds-uikit-product-copy

import { CopyButton } from '@cloud-ru/ds-uikit-product-copy'

Примеры использования

Базовый случай

import { CopyButton } from '@cloud-ru/ds-uikit-product-copy';

export function CopyButtonBasic() {
  return <CopyButton valueToCopy='hello-world' />;
}

С подписью

import { CopyButton } from '@cloud-ru/ds-uikit-product-copy';

export function CopyButtonWithLabel() {
  return <CopyButton valueToCopy='hello-world' label='Copy' />;
}

Три размера

import { CopyButton } from '@cloud-ru/ds-uikit-product-copy';

export function CopyButtonSizes() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <CopyButton size='s' valueToCopy='small' />
      <CopyButton size='m' valueToCopy='medium' />
      <CopyButton size='l' valueToCopy='large' />
    </div>
  );
}

С внешним обработчиком

import { CopyButton } from '@cloud-ru/ds-uikit-product-copy';
import { useState } from 'react';

export function CopyButtonWithHandler() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <CopyButton valueToCopy='tracked-value' onClick={() => setCount(c => c + 1)} />
      <span>Скопировано раз: {count}</span>
    </div>
  );
}

Props

Types

CopyButtonProps

Related props

ButtonProps

Storybook

Figma

Смотри также

• CopyLine — строка с контентом и встроенной кнопкой копирования.
• Button — нижележащий компонент.