Copy inline API

Import

import { CopyInline } from '@cimpress-ui/react';

Accessibility notes

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

Style inheritance

CopyInline rendered within the text component will inherit the style of the surrounding text. Certain styles like color and text decoration will not be inherited, so that CopyInline can remain visually distinct.

The example below renders two paragraphs of text with nested CopyInline. Notice that the CopyInline components match the style of the containing paragraph, even though their markup doesn’t change.

Preview

This paragraph contains a copyable text⁠ that inherits its style.

This paragraph also contains a copyable text⁠ that inherits its style.

Code

import { CopyInline, Stack, Text } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Text as="p" variant="title-5" tone="base">
        This paragraph contains a <CopyInline>copyable text</CopyInline> that inherits its style.
      </Text>

      <Text as="p" variant="medium" tone="subtle" fontStyle="italic">
        This paragraph also contains a <CopyInline>copyable text</CopyInline> that inherits its style.
      </Text>
    </Stack>
  );
}

Copy code Open in playground

API reference

CopyInline

Allows copying an inline value to clipboard.

See copy inline usage guidelines.

ref

Ref<HTMLButtonElement>

The ref type for this component.

CopyInlineProps

children *

StringLikeChildren

The content to be copied.

onCopy

() => void

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

id

string

The element's unique identifier. See MDN.

data-cim-style-root

boolean

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

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

CSSProperties

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

See styling guide.

aria-label

string

Defines a string value that labels the current element.

aria-labelledby

string

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

aria-describedby

string

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

aria-details

string

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

variant

'small' | 'medium' | 'title-1' | 'title-2' | 'title-3' | 'title-4' | 'title-5' | 'title-6' | 'body' | 'body-semibold' | 'medium-semibold' | 'small-semibold'

Determines the visual variant of text.

isDisabled

boolean

Whether the button is disabled.

onHoverStart

(e: HoverEvent) => void

Handler that is called when a hover interaction starts.

onHoverEnd

(e: HoverEvent) => void

Handler that is called when a hover interaction ends.

StyleProps

margin

Responsive<Spacing | "auto">

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

marginX

Responsive<Spacing | "auto">

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

marginY

Responsive<Spacing | "auto">

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

marginTop

Responsive<Spacing | "auto">

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

marginRight

Responsive<Spacing | "auto">

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

marginBottom

Responsive<Spacing | "auto">

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

marginLeft

Responsive<Spacing | "auto">

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