Pricing

CopyButton

Figma Source code

Copy text or code to the clipboard and briefly confirm success, useful for links, identifiers, and install commands.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use CopyButton to copy content and show brief feedback. Supply text or getText for the value, and use writeText when an application already has its own clipboard operation. The component manages the success state.

  • Use text for a fixed value or getText for a value resolved at click time. writeText replaces the clipboard write operation.

  • Handle business feedback with onCopy and onCopyError. Set showText=false for an icon-only button; feedbackDuration controls how long the result remains visible.

Import

import { CopyButton } from '@snowui-design-system/components';

Usage

Variants

API Reference

Property Type Default Example Description
text string — text="Example" Fixed text to copy. getText takes precedence when provided; if neither is supplied, the component copies an empty string.
getText () => string | Promise<string> — getText={() => 'pnpm add @snowui-design-system/components'} Resolve the text when clicked; may return a Promise. Takes precedence over text. Evaluation and clipboard writing both occur in the pending state, and failures call onCopyError.
writeText (text: string) => void | Promise<void> writeClipboardText writeText={(value) => { /* handle value */ }} Replace the clipboard write operation. Success appears after its Promise resolves; a thrown error produces failure feedback. Use this for an existing application clipboard callback to avoid writing twice. The default uses the built-in clipboard writer.
feedbackDuration number 1600 feedbackDuration={42} Time in milliseconds before the button returns to idle after success or failure. Negative values count as zero. Additional clicks are ignored while pending or showing feedback.
showText boolean true showText Show children or the default Copy label beside the icon. When false, show only the status icon; non-bare variants use Button.iconOnly.
ariaLabel string — ariaLabel="Example" Override the accessible name. In icon-only mode, the default follows the Copy or Copied status through LocaleProvider; with text, the content provides the name.
disabled boolean false disabled Prevent new copy operations. An asynchronous operation already in progress is not canceled.
children Snippet — (Copy) <CopyButton>Content</CopyButton> Replace the label beside the icon when showText=true. The supplied content remains during success and is ignored when showText=false.
icon Snippet — (Copy icon) icon={iconContent} Replace the icon before success. The pending and error states also use this icon.
successIcon Snippet — (Check icon) successIcon={successIconContent} Replace the icon shown after a successful copy. Takes precedence over successContent and appears through the internal state transition.
successContent Snippet — successContent={successContentContent} Alternative content for the success icon area when successIcon is absent. Does not replace the button label.
onCopy (text: string) => void — onCopy={(value) => { /* handle value */ }} Receive the text actually copied after a successful clipboard write. The component is already in the success state.
onCopyError (error: unknown) => void — onCopyError={(value) => { /* handle value */ }} Receive an error when resolving dynamic text or writing to the clipboard fails. The component enters error and resets after the feedback period.
onclick (event: MouseEvent) => void — onclick={(value) => { /* handle value */ }} Called before resolving text and copying, only while idle and enabled. preventDefault() does not cancel copying; clicks during feedback do not call this handler.