# Copy Id

An ID or token in a mono well with a copy button; "Copied" confirms in place, never as a toast.

Source page: https://sproutboat.com/ikada/components/copy-id

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/copy-id.json
```
Or from the package: `import { CopyId } from "@sproutboat/ikada";`
## Usage
```tsx
import { CopyId } from "@/components/ikada/copy-id";

<CopyId value="3f9a1c7e5b2d4a80c6e1f7d93b5a2c48e0d1f6a7" display="3f9a1c7" label="Copy commit hash" />
```
## Examples
### Default
The copy icon turns into a check, and “Copied” appears above it. Nothing is added to the toasts.
```tsx
<CopyId value="dpl_8f3a91c2" />
```
### Shortened hash
`display` shortens what is shown; the full value is what gets copied and shown on hover.
```tsx
<CopyId
  value="3f9a1c7e5b2d4a80c6e1f7d93b5a2c48e0d1f6a7"
  display="3f9a1c7"
  label="Copy commit hash"
/>
```
### Truncates in a narrow space

```tsx
<CopyId
  className="w-48"
  value="https://robin.sproutboat.app/hooks/deploy-finished"
  label="Copy webhook URL"
/>
```
## Props
### CopyIdProps
Also takes every prop of `Omit<ComponentProps<"span">, "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| value | `string` | The full value written to the clipboard. |
| display? | `string` | What is shown; defaults to the value. Use it to shorten hashes. |
| label? | `string` | Accessible name of the button, e.g. "Copy deployment ID". Default `Copy ID`. |
| onCopied? | `((value: string) => void)` | Called after a successful copy. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/copy-id.tsx