Core · Acciones y entrada
Botón para copiar
Copia un comando o un valor en el portapapeles e indica que lo ha hecho.
Ejemplo
Un valor con un botón para copiarlo en el portapapeles.
var(--luz-brand-primary)
The button copies the text of its data-copy attribute.
Problemas conocidos
La API del portapapeles necesita un contexto seguro (https o localhost durante el desarrollo). En otros contextos, la copia falla.
El fallo solo se anuncia a los lectores de pantalla: el botón no muestra ningún mensaje, así que quienes pueden verlo no perciben que haya pasado nada. Aun así, el texto se puede seleccionar y copiar a mano.
Código
Copiar el marcado
<code class="luz-code-inline">npm install @luz-ds/core</code>
<button class="luz-copy-btn" type="button" data-copy="npm install @luz-ds/core" aria-label="Copy the install command">Copy</button>import { initCopyButtons } from "@luz-ds/core/clipboard";
initCopyButtons();Variantes y opciones
Una clase y un atributo. El aspecto no cambia.
| Clase o atributo | Efecto |
|---|---|
.luz-copy-btn | Botón mono pequeño, de 24 px de alto; oculto hasta que se ejecuta el script |
data-copy | El texto exacto que se debe copiar |
.is-copied | El script lo establece durante aproximadamente un segundo tras copiar: color de éxito y etiqueta «Copiado» |
Cómo funciona
Un <button> nativo, al que da estilo components/copy-btn.css y que controla clipboard.js.
initCopyButtons()escucha los clics en cualquier.luz-copy-btny copia sudata-copy.luz.jslo ejecuta.- Durante aproximadamente un segundo, la etiqueta muestra «Copiado» y luego vuelve a su estado anterior.
- Una región dinámica cortés anuncia «Copiado en el portapapeles» o que la copia ha fallado. Los textos proceden de
i18n.jsy están en el idioma de la página. copyToClipboard(text, el)hace lo mismo con tus propios controles.
Sin JavaScript
El botón está oculto porque no haría nada. El texto que copia permanece en la página para que el lector lo seleccione y lo copie.
Teclado y ARIA
Con Tab se llega al botón; Enter o Espacio copia el texto. El foco permanece en el botón.
- La etiqueta visible es «Copiar»; el
aria-labelempieza con esas palabras e indica qué se copia: «Copiar el comando de instalación». - El resultado se anuncia en una región dinámica cortés que comparten todos los botones para copiar.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa un botón para copiar una cadena breve que el lector vaya a pegar en otro sitio: un comando, el nombre de un token o una clave.
Cuándo no usarlo
No uses un botón para copiar si es igual de fácil seleccionar el texto ni como única forma de obtener el contenido.
- Para textos largos, usa un bloque de código que el lector pueda seleccionar.
Qué hacer y qué no
Cómo escribir el contenido
Mantén la etiqueta visible «Copiar» e indica qué copia en el nombre accesible.
- Empieza el nombre accesible con la palabra visible: «Copiar el comando de instalación».
- Copia exactamente lo que se muestra, sin el símbolo del prompt ni espacios adicionales.
Contraste y foco
La etiqueta usa texto secundario en la página; después de copiar, cambia al color de éxito.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Mínimo |
|---|---|---|---|---|---|
Etiqueta | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Etiqueta al pasar el puntero | --luz-text-primary on --luz-brand-subtle over --luz-surface-page | 14.3:1 | 12.7:1 | 20.1:1 | 4.5:1 |
Etiqueta tras copiar | --luz-color-success on --luz-surface-page | 5.3:1 | 12.5:1 | 9.3:1 | 4.5:1 |
Anillo de foco | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.
- Foco: un contorno de 2 px
--luz-focus-ring, situado a 2 px del botón. - No depende solo del color: después de copiar, la etiqueta muestra «Copiado» y una región dinámica lo anuncia; el verde es solo un complemento.
- Objetivo táctil: al menos 24 px de alto.
Tokens que usa
Los 13 tokens que lee components/copy-btn.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Color
--luz-brand-primary,--luz-brand-subtle,--luz-color-success,--luz-divider,--luz-focus-ring,--luz-text-primary,--luz-text-secondary- Spacing and sizing
--luz-space-2xs,--luz-space-xs- Typography
--luz-font-mono,--luz-text-xs- Radius
--luz-radius-md- Motion
--luz-duration-fast
El teclado y ARIA están en la pestaña Código.