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 Button

Displays an icon button used to copy a value into the clipboard.

 <CopyButton onClick={() => navigator.clipboard.writeText('Hello world')} />

API Reference

This component inherits the props from the Icon Button, but doesn’t accept children. View source

How it works

Copy Button provides a standardised interaction for copying a value. You’ll need to use your own preferred method of copying text into the clipboard using an onClick handler.

Examples

Disabled

Disable or hide the Copy Button when there is nothing to copy.

 <CopyButton state="disabled" />

Within Text Field

Use Copy Button within a Text Field slot when user might need to copy a unique value.

 () => {
  const [value, setValue] = React.useState('5e6OwnLTCs4avjCrKF6M');
  return (
    <TextField.Root
      value={value}
      spellCheck="false"
      onChange={(event) => setValue(event.currentTarget.value)}
    >
      {value && (
        <TextField.Slot side="right">
          <CopyButton
            size="1"
            onClick={() => navigator.clipboard.writeText(value)}
          />
        </TextField.Slot>
      )}
    </TextField.Root>
  );
};