Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Copy Button
Confetti

A fun and engaging animation component that displays confetti for celebration or reward effects.

Double Helix Words

A visually striking text animation component that mimics the motion of a double helix.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

CopyButton

A utility button that copies a specified text to the clipboard when clicked. Often accompanied by a tooltip or visual confirmation.

Usage

Basic usage example to quickly see how the CopyButton works.

"use client";
import { CopyButton } from "@/ui/copy-button";
import { CopyCheckIcon, CopyIcon } from "@/icons/*";
import { Button } from "@/ui/button";

const value = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse veritatis molestias ex architecto maxime, exercitationem sint perferendis nulla aperiam doloremque?";

export function CopyButoonDemo() {
  return (
    <CopyButton value={value.trimEnd()}>
      {({ copied, copy }) => (
        <Button variant="outline" size="icon" color="grape" onClick={copy} aria-label={copied ? "Copied" : "Copy code"}>
          {copied ? <CopyCheckIcon size="sm" /> : <CopyIcon size="sm" />}
        </Button>
      )}
    </CopyButton>
  );
}

Properties

Interactive configurator to explore customization options for the CopyButton component.

Timeout
"use client";
import { CopyButton } from "@/ui/copy-button";
import { Tooltip } from "@/ui/tooltip";
import { CopyCheckIcon, CopyIcon } from "@/icons/*";

export function CopyButtonDemo() {
  return (
    <CopyButton value="">
      {({ copied, copy }) => (
        <Tooltip content={copied ? "Copied" : "Copy code"} side="top" onClick={copy} aria-label={copied ? "Copied" : "Copy code"}>
          {copied ? <CopyCheckIcon size="sm" /> : <CopyIcon size="sm" />}
        </Tooltip>
      )}
    </CopyButton>
  );
}

API References

Props API

Props APITypeDefaultAnnotation
children?(payload: { copied: boolean; copy: () => void }) => React.ReactNodeChildren callback, provides current status and copy function as an argument
value?stringValue that will be copied to the clipboard when the button is clicked
timeout?number1000Copied status timeout in ms

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

copy-button.tsx