OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Copy Chip

Displays a chip used to copy its value into the clipboard.

 <CopyChip weight="bold">foo-corp.com</CopyChip>

API Reference

This component inherits the props from the Chip. View source

How it works

Copy Chip automatically copies its text contents into clipboard and displays a status tooltip.

Examples

With an obfuscated value

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>
  );
};