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.
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
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
Some examples of items that use Basic styling are:
API Keys
Snippets
States
🟢 ClickToCopy / variant=Code, state=Default
🟢 ClickToCopy / variant=Code, state=Hover
🟢 ClickToCopy / variant=Code, state=Focus
🟢 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
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
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