Todos los componentes (204)

Copiable

Acciones · Copyable

Qué es y cuándo usarlo

Un dato con su botón de copiar al lado: un IBAN, un código de descuento, una clave de API, un número de seguimiento. Al copiar, el icono pasa a una marca de hecho y encima del botón sale «Copiado» durante dos segundos, en una burbuja que no ocupa sitio en la fila.

Cuándo usarlo

Datos que la gente va a pegar en otro sitio y que cuesta copiar a mano sin equivocarse.
Con children si lo que se ve no es lo que se copia: el IBAN se lee en grupos de cuatro y se pega sin espacios.
buttonOnly cuando el valor ya está escrito al lado o no hace falta enseñarlo.
monospace (por defecto) pone las cifras en ancho fijo; truncate corta lo largo con puntos suspensivos en vez de partirlo. onCopy avisa con el valor copiado.

Cuándo no

Un bloque de código de varias líneas: CodeBlock, que ya trae su botón de copiar.
La dirección de una página para mandársela a alguien: ShareButton.

Teclado: Tab llega al botón de copiar; Intro o Espacio copian. El valor es texto normal y se puede seleccionar a mano.

Accesibilidad: label es obligatoria y es el nombre del botón: «Copiar el IBAN», no «Copiar». El «Copiado» (copiedText) se dice con texto en una región de estado, no solo cambiando el icono. Si el navegador no deja copiar (sin HTTPS, permisos denegados), lo dice también (failureText) en vez de fingir que ha ido bien. Lo largo se parte en líneas por defecto: un IBAN cortado no se puede comprobar.

Aspecto fino: sin variables propias: se ajusta con las clases amset-copyable, amset-copyable__value y amset-copyable__alert. El botón es un IconButton pequeño y admite las --amset-button-*.

Cómo se ve

AURELIA10ES91 2100 0418 4502 0005 1332

Enlace del pedido 1042

<Copyable value="AURELIA10" label="Copiar el codigo de descuento" monospace />
<Copyable value="ES9121000418450200051332" label="Copiar el IBAN" monospace>
  ES91 2100 0418 4502 0005 1332
</Copyable>
<Copyable value={enlace} label="Copiar el enlace del pedido 1042" buttonOnly />

Props

Se importa con import { Copyable } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que es esto, para el nombre del boton: "Copiar el IBAN". Obligatorio.
`value`obligatoria	`string`	Lo que se copia. Si no se da `children`, tambien es lo que se ve.
`buttonOnly`	`boolean`	Solo el boton, sin enseñar el valor.
`children`	`ReactNode`	Lo que se ve, si es distinto de lo que se copia (un IBAN con espacios).
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`copiedText`	`string`	Lo que se dice al copiar.
`failureText`	`string`	Lo que se dice si el navegador no deja copiar.
`monospace`	`boolean`	Tipografia de numeros: para IBAN, codigos y claves.
`onCopy`	`(value: string) => void`	—
`size`	`"sm" \| "md" \| "lg"`	—
`truncate`	`boolean`	Corta lo que no cabe con puntos suspensivos. Por defecto se parte en varias lineas: un IBAN o una clave cortados no se pueden leer para comprobarlos.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: