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
Botones
Gratis
Descargar
Botó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.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 12 (9 ajustables)
Instalación
1. Instala el paquete
npm i furin2. Impórtalo
import { DownloadButton } 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 |
|---|---|---|---|
| label | string | "Descargar" | Texto del botón en reposo. |
| doneLabel | string | "Listo" | Texto cuando termina. |
| fileName | string | "furin-kit.zip" | Nombre del archivo que se muestra mientras "baja". |
| fileSize | string | "4,2 MB" | Tamaño del archivo que se muestra mientras "baja". |
| duration | number | 3200 | Duración de la descarga simulada, en milisegundos. |
| href | string | "" | Si lo pones, al terminar se descarga ese archivo de verdad. |
| resetAfter | number | 2600 | Milisegundos que se queda en "listo" antes de volver al inicio (0 = se queda). |
| color | string | "#F3F4F7" | Color del botón en reposo. |
| doneColor | string | "#6EE0A6" | Color del estado "listo". |
| onStart | () => void | "" | Se llama cuando empieza la descarga. |
| onComplete | () => void | "" | Se llama cuando termina. |
| autoplay | number | 0 | Segundos entre descargas automáticas (0 = apagado; se detiene al interactuar). |
Sigue explorando
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
Mantener para confirmar
GratisMantén presionado para confirmar: un anillo se llena, el botón tiembla cada vez más y al completar vibra. Con ratón, toque o teclado.
Botones