Copy button | Lime design system

Examples

Account details

Your pay link

When to use it

Use: A value the person pastes elsewhere: a payment link, invite code, account number, reference.
Use: A read-only field or code block that needs a one-press copy.
Not for: The action does something other than copy. Use Button.
Not for: The value needs review before sharing. Show it in a field, then offer the copy button.

8 rules

Must: Set label to a verb and its object, such as "Copy share link", on an icon-only button. Because label defaults to "Copy", so every icon-only CopyButton gets the same name.
Should: Put the button with the value it copies, inside the end of the field, so the person sees what was copied.
Never: Swap the label to Copied; keep the text and let the check and the status region carry the result. Because a new label shifts the width and renames the button while it has focus.
Never: Add a toast for a copy; the check and the status region already confirm it. Because the person hears the copy twice, from the status region and the toast.
Should: Show the value in a selectable field around the button; a blocked clipboard shows Copy failed only.
Should: Pass size="icon-lg" on a phone; the icon-only default is 32px.
Must: Render no CopyButton when there is nothing to copy; an empty value still shows the check. Because copying an empty string succeeds, so the check confirms a copy of nothing.
Never: Pass onClick or icon; CopyButton owns them. Because props spread last, so your onClick replaces the copy and your icon hides the check.

4 checks

: A button named by label, or by its text children.
: A sibling role="status" region says "Copied" or "Copy failed"; the button name stays Copy.
: Enter and Space copy; focus stays on the button.
: Hover, focus and active come from Button.

6 edge cases

Right to left: The icon has no direction; in a labelled button it sits first, on the right.
Clipboard refused: The icon turns to a warning for the reset time and the region says Copy failed.
Rapid presses: Each press restarts the timer; the check stays 1.6 seconds after the last.
Inside a form: It does not submit; Button renders type="button".
Forced colors: Takes Button's border; the check uses currentColor.
Reduced motion: No press scale; the icon swap is not animated.

5 props

10 tokens