Motion UIComponentsComponent

Copy button

A copy-to-clipboard button that confirms with a glyph swap and a self-drawing check.

npx shadcn@latest add @motion/copy-button
Install guideMotionScore

API reference

Components

<CopyButton />

Copy-to-clipboard button with confirm swap and aria-live announcement.

value

string

Text written to the clipboard on click.

variant?

CopyButtonVariant = "label"

Button shape. Defaults to "label".

children?

ReactNode = "Copy"

Visible resting label ("label" variant only). Default "Copy".

copiedText?

ReactNode = "Copied"

Visible confirmed label ("label" variant only). Default "Copied".

label?

string = "Copy to clipboard"

Accessible name while resting. Default "Copy to clipboard".

copiedLabel?

string = "Copied to clipboard"

Accessible name after copy. Default "Copied to clipboard".

resetMs?

number = 2000

How long the confirmed state holds, in ms. Default 2000.

onCopy?

(value: string) => void

Fired after the clipboard write is attempted.

disabled?

boolean

Disable the button.

className?

string

Merged onto the button element.

ref?

Ref<HTMLButtonElement>

Ref to the underlying <button>.

Featured in

See the copy button composed into full sections.

Terminal heroAn example of a dev-tool hero with a terminal that types a Velocity CLI session and a copyable install command in Motion for React.

Related examples