Skip to content
Cimpress UI

Copy button API

Usage guidelinesAPI

Import

Section titled “Import”
import { CopyButton } from '@cimpress-ui/react';

Accessibility notes

Section titled “Accessibility notes”

CopyButton can be activated by pressing Enter or Space, similar to a native HTML button.

Icon-only copy button should have an aria-label prop defined to identify the function of the button to assistive technologies. See our accessibility guide for more details.

API reference

Section titled “API reference”

CopyButton

Section titled “CopyButton”

Displays a button that allows users to copy a specific value to clipboard.

See copy button usage guidelines.

ref
Section titled “ ref ”
Ref<HTMLButtonElement>

The ref type for this component.

CopyButtonProps
value *
Section titled “ value * ”
string

The content to be copied.

size
Section titled “ size ”
'small' | 'medium' | 'large'

The size of the button.

Defaults to 'medium' .
children
Section titled “ children ”
StringLikeChildren

The text displayed on the button.

variant
Section titled “ variant ”
'secondary' | 'tertiary'

Determines the visual appearance of the button.

Defaults to 'secondary' .
description
Section titled “ description ”
string

The description that appears in a tooltip when the user hovers or focuses the button.

onCopy
Section titled “ onCopy ”
() => void

A handler that gets called when the user triggers the copying.

id
Section titled “ id ”
string

The element's unique identifier. See MDN.

data-cim-style-root
Section titled “ data-cim-style-root ”
boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className
Section titled “ UNSAFE_className ”
string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style
Section titled “ UNSAFE_style ”
CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

aria-label
Section titled “ aria-label ”
string

Defines a string value that labels the current element.

aria-labelledby
Section titled “ aria-labelledby ”
string

Identifies the element (or elements) that labels the current element.

aria-describedby
Section titled “ aria-describedby ”
string

Identifies the element (or elements) that describes the object.

aria-details
Section titled “ aria-details ”
string

Identifies the element (or elements) that provide a detailed, extended description for the object.

isDisabled
Section titled “ isDisabled ”
boolean

Whether the button is disabled.

onHoverStart
Section titled “ onHoverStart ”
(e: HoverEvent) => void

Handler that is called when a hover interaction starts.

onHoverEnd
Section titled “ onHoverEnd ”
(e: HoverEvent) => void

Handler that is called when a hover interaction ends.

StyleProps
margin
Section titled “ margin ”
Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX
Section titled “ marginX ”
Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY
Section titled “ marginY ”
Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop
Section titled “ marginTop ”
Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight
Section titled “ marginRight ”
Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom
Section titled “ marginBottom ”
Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft
Section titled “ marginLeft ”
Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.