# Letter swap copy button

https://fieldbook.lizardi.mx/es/components/letter-swap-copy-button

Categoría: Botones
![Imagen fija del componente Letter swap copy button de Fieldbook, de la categoría Botones.](https://fieldbook.lizardi.mx/thumbs/letter-swap-copy-button.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/letter-swap-copy-button-1616fad754.mp4 (5 s, silent)

Letter swap copy button: Un botón de copia en relieve cuya etiqueta se reconstruye letra por letra al pasar el mouse mientras su chip de icono pulsa y dibuja un cheque cuando llega la copia.

## Frameworks

react, vue, svelte, astro, html

## Controles de la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

| Nombre | Tipo | Valor inicial | Opciones o restricciones |
| --- | --- | --- | --- |
| label | text | Copy link | Hasta 18 caracteres |
| doneLabel | text | Copied | Hasta 18 caracteres |
| accent | color | #7C5CFF | Los metadatos no indican otro límite. |
| stagger | number | 30 | De 0 a 90; paso 5 |
| resetMs | number | 2000 | De 600 a 5000; paso 100 |

## Notas de uso

Letter swap copy button se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

### ¿Para qué frameworks está disponible Letter swap copy button?

Letter swap copy button está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

### ¿Qué dependencias tiene Letter swap copy button?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx.

### ¿Qué detalles de accesibilidad se observan en Letter swap copy button?

El código React de Letter swap copy button incluye: atributos y manejadores (aria-hidden, aria-live). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

### ¿Cómo maneja Letter swap copy button el movimiento reducido?

Letter swap copy button consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: duration: reduce ? 0 : 0.18; duration: reduce ? 0 : 0.3; duration: reduce ? 0.2 : ROLL\_MS / 1000. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

## Instalación mediante MCP

Conecta tu cliente, llama a get_component para obtener la implementación y después a get_install_command para consultar las instrucciones. Elige un framework de la lista, integra el código y verifica su funcionamiento en tu aplicación.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "letter-swap-copy-button",
    "framework": "react"
  }
}
```

[Para agentes](https://fieldbook.lizardi.mx/es/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Componentes abiertos relacionados

- [Letter cascade button](https://fieldbook.lizardi.mx/es/components/letter-cascade-button)
- [Check stroke submit](https://fieldbook.lizardi.mx/es/components/check-stroke-submit-button)
- [Destructive sweep button](https://fieldbook.lizardi.mx/es/components/destructive-sweep-button)
- [Flight path confirm button](https://fieldbook.lizardi.mx/es/components/flight-path-confirm-button)
- [Hold to delete](https://fieldbook.lizardi.mx/es/components/hold-to-delete-button)
- [Icon takeover delete](https://fieldbook.lizardi.mx/es/components/icon-takeover-delete-button)