# Copy Button (/ui/components/react/copy-button)
## Usage [#usage]
```tsx
import { CopyButton } from '@appica/ui-react/copy-button'
```
```tsx
```
`CopyButton` writes `value` to the clipboard on click, then swaps its copy icon for an animated check for a couple of seconds. It's built on [`Button`](/ui/components/react/button), so it takes every Button prop (`variant`, `size`, `disabled`, …) — it just defaults to a `ghost` `icon-sm` icon button.
`value` is flexible: a **string**, a **function** returning a string (or a promise of one — handy for computing the text lazily), or a **ref** to an element, in which case its `value` (inputs/textareas) or `textContent` is copied. That makes it a natural fit in the corner of a code block or input.
## Examples [#examples]
### Variants [#variants]
`CopyButton` forwards `variant` (and any Button prop) straight through.
```tsx
import { CopyButton } from '@appica/ui-react/copy-button'
export default function CopyButtonVariants() {
return (
)
}
```
### Sizes [#sizes]
Size comes from [`Button`](/ui/components/react/button): use the square `icon-sm` / `icon-md` / `icon-lg` for an icon-only button (the default is `icon-sm`), or `sm` / `md` / `lg` when you add a text label.
```tsx
import { CopyButton } from '@appica/ui-react/copy-button'
export default function CopyButtonSizes() {
return (
)
}
```
### With a label [#with-a-label]
Pass children to show text beside the icon. A string label automatically swaps to `copiedLabel` on success, mirroring the check animation.
```tsx
import { CopyButton } from '@appica/ui-react/copy-button'
export default function CopyButtonWithLabel() {
return (
Copy
)
}
```
### Copy from an element [#copy-from-an-element]
Give `value` a ref instead of a string to copy another element's content — here a code snippet. The button copies the element's `textContent` (or the `value` of an input/textarea).
```tsx
'use client'
import { useRef } from 'react'
import { CopyButton } from '@appica/ui-react/copy-button'
export default function CopyButtonFromElement() {
const codeRef = useRef(null)
return (
npm install @appica/ui-react
)
}
```
## RTL [#rtl]
Every Appica UI component supports right-to-left layouts out of the box. Set the `dir` attribute on a container (commonly your `` element) so CSS logical properties resolve correctly, and wrap your tree in `DirectionProvider` so direction-aware behavior — roving focus, popup placement, and the like — follows the same direction.
```tsx
import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
The icon and label swap sides to follow the resolved direction. For setup details and caveats, see the [RTL guide](/ui/docs/react/rtl).
## API reference [#api-reference]
### CopyButton [#copybutton]
Extends [`Button`](/ui/components/react/button) — every Button prop applies. The props below are the copy-specific additions and defaults.
| Prop | Type | Default | Description |
| ------------- | ------------------------------------------------------------------------------------ | ----------- | ----------------------------------------------------------------------------------------------------------- |
| `value` | string \| RefObject\ \| (() => string \| Promise\) | — | **Required.** What to copy: a string, an element ref (its value/textContent), or a (possibly async) getter. |
| `label` | `string` | `'Copy'` | Accessible name (and tooltip via `title`) in the idle state. |
| `copiedLabel` | `string` | `'Copied'` | Accessible name after a successful copy; a string child also swaps to this. |
| `timeout` | `number` | `2000` | How long (ms) the copied state lasts before reverting. |
| `onCopy` | (value: string) => void | — | Called with the copied text on success. |
| `onCopyError` | (error: unknown) => void | — | Called if reading the value or writing to the clipboard fails. |
| `variant` | Button variant | `'ghost'` | Inherited from `Button`; defaults to `ghost`. |
| `size` | Button size | `'icon-sm'` | Inherited from `Button`; defaults to the small icon size. |
| `children` | `ReactNode` | — | Optional visible label beside the icon. |
`CopyButton` falls back to a hidden-`textarea` + `execCommand('copy')` when the async Clipboard API is unavailable, and exposes `data-copied` while in the copied state for styling.
## Accessibility [#accessibility]
* Renders a real `