ClickToCopy

Stylized text that can be clicked to quickly copy to the clipboard

Healthy
Show details
Healthy
Published: February 05, 2024
Updated: February 21, 2024

Overview

The ClickToCopy component provides marketers with a convenient way to copy content to their clipboard with a single click. This functionality enhances marketer experience by reducing the manual effort required to copy text or data.

🟢 ClickToCopy / variant=Code, state=Hover

Design

Flexible heights

  • the ClickToCopy has a default and minimum-heigh of 24px, with a max-height of 40px. It should stretch the size of the elements around it—for example, if it’s placed next to a 32px button, the height should be inherited from that element.

Types

Code blocks

🟢 ClickToCopy / variant=Code, state=Hover

Some examples of items that use code styling are:

  • Values that can be used in handlebars
  • Data which can be accessed via our APIs
  • Something a developer might use in their code / terminal commands

 

Basic strings

🟢 ClickToCopy / variant=Basic Text, state=Hover

🟢 ClickToCopy / variant=Basic Text, state=Hover

Some examples of items that use Basic styling are:

  • API Keys
  • Snippets

 

States

🟢 ClickToCopy / variant=Code, state=Default

🟢 ClickToCopy / variant=Code, state=Default

🟢 ClickToCopy / variant=Code, state=Hover

🟢 ClickToCopy / variant=Code, state=Hover

🟢 ClickToCopy / variant=Code, state=Focus

🟢 ClickToCopy / variant=Code, state=Focus

🟢 ClickToCopy / variant=Code, state=Active

🟢 ClickToCopy / variant=Code, state=Active

Guidelines

Use cases

  • Use the ClickToCopy component when users need to easily copy content, such as text snippets, URLs, or other data
  • Implement the component in contexts where copying content is a common marketer action, such as sharing links or copying verification codes

 

  • Do ensure that the ClickToCopy component is clearly visible and accessible
  • Do provide clear and concise instructions or tooltips to inform marketers about the functionality of the component
  • Do test the component across different devices and browsers to ensure consistent behavior and accessibility
  • Don't use the ClickToCopy component for sensitive or confidential information without proper validation and security measures
  • Don't overload the component with unnecessary visual elements or animations that may distract marketers from its primary function

 

Content

The content of the ClickToCopy component should be informative and instructive, guiding marketers on what content will be copied upon clicking. It should clearly indicate the target content or data and provide feedback to marketers upon successful copying.

 

Accessibility

To ensure accessibility, follow these guidelines:

  • Use semantic HTML elements and attributes to provide context and improve screen reader compatibility
  • Ensure that the component is keyboard accessible, allowing marketers to trigger the copy action using keyboard shortcuts—by either pressing enter or ⌘+C / Ctrl +C on their keyboards
  • Provide sufficient color contrast and visual cues to assist marketers with low vision or color vision deficiencies

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy