Skip to main content

Copy Button

Copies text to the clipboard with stable loading feedback, then label or check icon on success. Layouts: label, icon, or both.

Layout: label

Layout: icon

Layout: both (icon + label)

Custom icon

Beside code

sk_live_abc123xyz789

Button variants

Loading

Copied

Disabled

Full width

Animation variants

animationVariant — click each control to compare press feedback.

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
textOptionalstringString written to clipboard.
layoutOptional"label" | "icon" | "both"labelText only, icon only, or icon + label.
childrenOptionalReactNodeCopyLabel before copy (label / both).
iconOptionalReactNodeCopy glyph for icon / both (built-in default).
copiedIconOptionalReactNodeSuccess glyph after copy (icon / both).
copiedLabelOptionalstringCopiedLabel after success.
copyLabelOptionalstringaria-label for icon-only mode.
animationVariantOptionalPressAnimationVariantdefaultPress animation — forwarded to Button.
loading / copiedOptionalbooleanForce loading or copied UI (docs / controlled previews).
minFeedbackMsOptionalnumber520Min loading visibility (avoids flash).
copiedResetMsOptionalnumber2000Copied state duration.
variant / sizeOptionalButtonVariant / ButtonSizeSame as Button.