Copy Id
An ID or token in a mono well with a copy button; "Copied" confirms in place, never as a toast.
3f9a1c7<CopyId value="3f9a1c7e5b2d4a80c6e1f7d93b5a2c48e0d1f6a7" display="3f9a1c7" label="Copy commit hash" />Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/copy-id.jsonThe CLI writes components/ikada/copy-id.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Icon Button and Inline Confirm. Or take it from the package: import { CopyId } from "@sproutboat/ikada";
Usage
import { CopyId } from "@/components/ikada/copy-id";
<CopyId value="3f9a1c7e5b2d4a80c6e1f7d93b5a2c48e0d1f6a7" display="3f9a1c7" label="Copy commit hash" />Examples
dpl_8f3a91c2<CopyId value="dpl_8f3a91c2" />3f9a1c7<CopyId
value="3f9a1c7e5b2d4a80c6e1f7d93b5a2c48e0d1f6a7"
display="3f9a1c7"
label="Copy commit hash"
/>https://robin.sproutboat.app/hooks/deploy-finished<CopyId
className="w-48"
value="https://robin.sproutboat.app/hooks/deploy-finished"
label="Copy webhook URL"
/>Props
| Prop | Type | Description |
|---|---|---|
| valuerequired | 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. |
Also takes every prop of Omit<ComponentProps<"span">, "children">.
Source: src/components/copy-id.tsx