Descargar
GratisBotón que se afina hasta ser una barra de progreso, avanza a ritmo irregular como una red real y termina en una palomita. Con href descarga el archivo de verdad.
Botones
Botones
Gratis
Copiar
Botón de copiar: el contorno del ícono se transforma en una palomita con un morph de trazo y resorte, y el texto se copia de verdad con navigator.clipboard (con respaldo).
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 8 (7 ajustables)
npx furin add copy-morphInstalación
1. Instala el paquete
npm i furin2. Impórtalo
import { CopyMorph } from "furin";También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| text | string | "npx furin add copy-morph" | Texto que se copia al portapapeles. |
| label | string | "Copiar" | Texto del botón en reposo. |
| copiedLabel | string | "Copiado" | Texto del botón después de copiar. |
| errorLabel | string | "No se copió" | Texto del botón si la copia falla. |
| variant | "field" | "button" | "icon" | "field" | "field" muestra el texto con el botón al lado; "button" solo el botón; "icon" solo el ícono. |
| duration | number | 1900 | Milisegundos que se queda la palomita antes de volver. |
| successColor | string | "#6EE0A6" | Color de la confirmación. |
| onCopy | (text: string) => void | "" | Se llama después de copiar con éxito. |
Sigue explorando
Deslizar para confirmar
GratisPomo con física que se arrastra hasta el final para confirmar; si se suelta antes regresa con resorte y rebote. Accesible como slider.
Botones
Destello
GratisBotón oscuro con un destello que lo cruza cada tanto y al pasar el cursor, encendiendo a la vez el relleno, el borde y el texto.
Botones