CopyButton

actions

Click-to-copy button with clipboard API integration and visual success feedback. Token-driven colors, sizing, and border styles.

Import

typescript
import { CopyButton } from "packages/ui/src";

Props

CopyButtonProps

PropTypeRequired
textstringYes
labelstringNo
successLabelstringNo

Examples

CopyButton

Click-to-copy button with clipboard API, success feedback, and auto-reset.

Default

npm install @cms/ui

Custom Labels

https://cms.chem.dev

Token Value

#a78bfa

Code Snippet

import { CopyButton } from "@cms/ui";

<CopyButton text="Hello, World!" />

Metadata

Component Metadata
Familyactions
FrameworksNext.js, Astro/EmDash
DescriptionClick-to-copy button with clipboard API integration and visual success feedback. Token-driven colors, sizing, and border styles.
PropsCopyButtonProps (text: string, label?: string, successLabel?: string)
Statesidle, copied/success, hover
A11y
  • Button has aria-label with copy target text
  • Success state updates aria-label
  • Icons are aria-hidden
Responsive
  • Inline-flex by default
Motion
  • Background/color transition (0.15s)
  • Auto-reset after 2s
Token Dependencies
  • components.copyButton.bg
  • components.copyButton.bgHover
  • components.copyButton.bgSuccess
  • components.copyButton.color
  • components.copyButton.colorSuccess
  • components.copyButton.borderColor
  • components.copyButton.borderRadius
  • components.copyButton.padding
  • components.copyButton.iconSize
  • components.copyButton.fontSize
  • components.copyButton.gap
Content Slotslabel (string), successLabel (string)
CMS Bindings
  • Copy text from CMS field
Test Cases
  • Renders with label
  • Has button role
  • Shows copy icon
  • Has aria-label with text
  • Shows custom label
  • Shows custom success label text in DOM
  • Default label is Copy
  • Passes className through