---
title: "CopyButton"
description: "Copies a value to the clipboard, then shows a check and \"Copied\" for two seconds, or \"Couldn’t copy\" when the browser refuses, and announces the same to screen readers."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CopyButton

## Beside a value

label names what is copied, in the app’s language, starting with the visible word ("Copy", "Copiar").

```tsx
import { useLocale } from 'react-aria-components';
import { CopyButton } from '@arbol-ai/ui';

const OrganizationIdExample = () => {
  const { locale } = useLocale();
  // The app passes its own copy, translated by its message system.
  const label = locale.startsWith('es') ? 'Copiar el ID de la organización' : 'Copy the organization ID';
  return (
    <div className="flex max-w-md items-center gap-2">
      <code className="bg-muted rounded-field flex-1 truncate px-3 py-1.5 font-mono text-xs">
        org_01JF8Z3KQ4V7W2N6
      </code>
      <CopyButton label={label} value="org_01JF8Z3KQ4V7W2N6" />
    </div>
  );
};

<OrganizationIdExample />
```

## Other words

Per instance, or for the whole app through UIProvider messages.

```tsx
import { CopyButton } from '@arbol-ai/ui';

<CopyButton
  copiedLabel="Link copied"
  value="https://example.com/book/clinica-norte"
  variant="secondary"
/>
```

## Source

The examples above are [`src/components/copy-button/copy-button.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/copy-button/copy-button.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/actions/copy-button/index.mdx