Displays a chip used to copy its value into the clipboard.
<CopyChip weight="bold">foo-corp.com</CopyChip>
This component inherits the props from the Chip. View source
Copy Chip automatically copies its text contents into clipboard and displays a status tooltip.
If you need to copy a value that’s different from what’s displayed in the chip, you can call event.preventDefault() in the onClick handler and copy the value manually. This may be helpful when dealing with secret keys that need to be obfuscated.
const secretId = 'sphvpisznne5n3cm9lbewomius8n486e'; () => { return ( <CopyChip color="gray" onClick={async (event) => { event.preventDefault(); await navigator.clipboard.writeText(secretId); }} > <Code variant="ghost" size="2"> {secretId.substring(0, 4)} ... {secretId.substring(secretId.length - 4, secretId.length)} </Code> </CopyChip> ); };