UIKit
7.28.0
• ClipboardButton컴포넌트
UIKit
7.28.0
AccordionActionTooltipAlertArrowToggleAvatarBreadcrumbsButtonCardCheckboxClipboardButtonDisclosureDividerDropdownMenuFilePreviewHelpMarkHotkeyIconLabelLinkListLoaderMenuModalOverlayPaginationPalettePinInputPopoverPopupPortalProgressRadioRadioGroupSegmentedRadioGroupSelectSheetSkeletonSliderSpinStepperSwitchTableTabsTextTextAreaTextInputToasterTocTooltipUserUserLabel
Date Components
3.4.1
Navigation
3.11.0
size
text
hasTooltip
timeout
tooltipInitialText
tooltipSuccessText
import {ClipboardButton} from '@gravity-ui/uikit';
This component puts CopyToClipboard and ClipboardIcon together. CopyToClipboard sends a text to the clipboard and, as a wrapper, uses ClipboardIcon as content for itself to display animation when a copy-paste event happens.
<ClipboardButton text="Some text to copy" />§Properties
The ClipboardButton properties are inherited from the Button properties.
| Name | Description | Type | Default |
|---|---|---|---|
| hasTooltip | Toggles displaying the tooltip | boolean | true |
| onCopy | Callback after copying (text: string, result: boolean) => void | Function | |
| text | Text to copy (can be a string or a function that returns a string) | string | () => string | |
| timeout | Time before the state switches back to normal after the button is clicked | number | 1000 |
| tooltipInitialText | Text shown before copying | string | "Copy" |
| tooltipSuccessText | Text shown after copying | string | "Copied!" |
| icon | Custom icon | React.ReactNode | |
| iconPosition | Position of icon | start | end | start |