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.
Current the copy icon is used in two places: Please refer to Placement in page designs for examples.
Please refer to Placement in page designs for examples.
Use the appropriate ARIA attributes for screen readers where applicable.
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
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>