ClickToCopy
When to use
Section titled “When to use”Style colors, GTINs, incident numbers, or any identifier users need to copy. Composed inside DataTable product cells.
When NOT to use
Section titled “When NOT to use”Full text fields — use Podium TextField. Secrets/passwords — never expose via click-to-copy.
Podium primitives composed
Section titled “Podium primitives composed”- Podium
Text - Podium
IconButton
Auto-generated from
src/components/ClickToCopy/ClickToCopy.types.ts. Do not edit by hand. Runpnpm docs:propsafter changing source JSDoc.
ClickToCopyProps
Section titled “ClickToCopyProps”| Prop | Type | Required | Description |
|---|---|---|---|
children |
ReactNode |
No | Content to display inside the wrapper. This is what the user sees and interacts with — it is not modified in any way. If omitted, value is displayed instead, so <ClickToCopy value={value} /> works standalone with no children needed. |
value |
string |
No | The string value to copy to the clipboard when clicked. If omitted, falls back to children when it is a plain string. |
Examples
Section titled “Examples”Copy style color
Section titled “Copy style color”import { ClickToCopy } from '@nike/whisker-component-library';
<ClickToCopy value="DX1234-100" label="DX1234-100" />;