Copy text icon

Live demo

Default variant

This variant is designed to be used when it needs to be inline with text. Just and you will see the text copied to your clipboard.

Tag variant

Design

Usage

The copy text icon allows users to copy words or sentences and hold it in the clipboard. This helps the user to copy specific words without missing any characters.

Placement

Current the copy icon is used in two places: Please refer to Placement in page designs for examples.

Balances card
Settlement account page

Please refer to Placement in page designs for examples.

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable.

Behaviour

Default, Before entry

Text colour: Global/neutral-500
Icon colour: Global/neutral-300

Hover, user mouses over

Text colour: Global/neutral-500
Icon colour turns: Global/neutral-300

Copied, user clicks on icon

Text colour: Global/neutral-500
Icon colour turns: Global/success-500 Toast appears at the bottom of the screen

Code

import { CopyTextIcon } from '@shieldpay/bumblebee/copy-text-icon';

  <CopyTextIcon
    idleTooltipText="Click to copy"
    copiedTooltipText="Copied!"
  >
    I‘m Mr Meeseeks
  </CopyTextIcon>

  <CopyTextIcon
    idleTooltipText="Click to copy"
    copiedTooltipText="Copied!"
    variant="tag"
  >
    Tag you are it!
  </CopyTextIcon>