Skip to content
EspañolEnglish
All components (204)

Copyable

Actions · Copyable

What it is and when to use it

A piece of data with its copy button next to it: an IBAN, a discount code, an API key, a tracking number. When copied, the icon turns into a check mark and "Copied" appears above the button for two seconds, in a bubble that takes up no space in the row.

When to use it

  • Data that people are going to paste somewhere else and that is hard to copy by hand without mistakes.
  • With children if what is seen is not what is copied: the IBAN is read in groups of four and pasted without spaces.
  • buttonOnly when the value is already written next to it or does not need to be shown.
  • monospace (the default) sets digits in a fixed width; truncate cuts long values with an ellipsis instead of breaking them. onCopy reports the copied value.

When not to

  • A multi-line code block: CodeBlock, which already brings its copy button.
  • The address of a page to send to someone: ShareButton.

Keyboard: Tab reaches the copy button; Enter or Space copy. The value is normal text and can be selected by hand.

Accessibility: label is required and is the name of the button: "Copy the IBAN", not "Copy". The "Copied" message (copiedText) is spoken with text in a status region, not just by changing the icon. If the browser does not allow copying (no HTTPS, denied permissions), it says so too (failureText) instead of pretending that it went well. Long values wrap onto lines by default: a truncated IBAN cannot be checked.

Fine-tuning: no variables of its own: adjust it with the classes amset-copyable, amset-copyable__value and amset-copyable__alert. The button is a small IconButton and accepts the --amset-button-* variables.

What it looks like

AURELIA10ES91 2100 0418 4502 0005 1332

Link to order 1042

<Copyable value="AURELIA10" label="Copy the discount code" monospace />
<Copyable value="ES9121000418450200051332" label="Copy the IBAN" monospace>
  ES91 2100 0418 4502 0005 1332
</Copyable>
<Copyable value={enlace} label="Copy the link to order 1042" buttonOnly />

Props

Import it with import { Copyable } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
labelrequiredstringWhat this is, for the button's name: "Copy the IBAN". Required.
valuerequiredstringWhat is copied. If `children` is not given, it is also what is shown.
buttonOnlybooleanOnly the button, without showing the value.
childrenReactNodeWhat is shown, if different from what is copied (an IBAN with spaces).
classNamestringMerged with the library classes; it does not replace them.
copiedTextstringWhat is said on copying.
failureTextstringWhat is said if the browser does not allow copying.
monospacebooleanTypography for numbers: for IBANs, codes and keys.
onCopy(value: string) => void—
size"sm" | "md" | "lg"—
truncatebooleanCuts what does not fit with an ellipsis. By default it wraps onto several lines: a cut-off IBAN or key cannot be read to check it.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: