WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Buttons & Actions

Copy Button

Buttons & ActionsCopy Button
Button GroupDelete Button
Live props
Content
value
children
copyLabel
copiedLabel
errorLabel
Appearance
variant
size
radius
tone
successTone
color
Layout
fullWidth
State
loading
disabled
Behavior
tooltip
timeout2000ms
Code
import { CopyButton } from "@/components/ui/copy-button"

<CopyButton />
Pro

v1.0.0·Added in 1.0.0

Copy an IBAN, a tax ID, a link or an API key with one tap: an icon button with a tooltip, a labelled button, and CopyText for inline values.

Click the copy icon next to the IBAN: it shrinks away, a check pops in and draws itself, and the tooltip says Copied without closing. Clicking again restarts the timer; after the timeout the copy icon comes back. With the keyboard, Tab to a button (the tooltip opens on focus) and press Enter or Space. A labelled button swaps its label to the copied text and keeps its width. CopyText makes the value itself the target: hover shows a dotted underline, a copy flashes the text once. A value read from a function that takes longer than 300ms shows the spinner; a failing or empty one shows an X and announces the error. On a phone there is no tooltip: the check, a short vibration and the screen reader announcement carry the feedback, and the small size still has a 44px hit area.

Add to a project

npx wingo-ui@latest add copy-button

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactbuttontooltipuse-clipboardmotiontonesui-config

Files

  • components/ui/copy-button.tsx

See also

useClipboardhookButtonCode BlockTooltip
PreviousButton GroupNext Delete Button

Payment details

IBANGB29 NWBK 6016 1331 9268 19
Tax ID12-3456789
Invoice link #2026-0412https://acme.com/i/2026-0412

Tab to a button and press Enter to copy. Paste anywhere to check.

Tap an icon to copy, then paste anywhere to check.

"Copy" → "Copied" · error "Copy failed" · 2000 ms