Mantener para confirmar

Manté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.

Vista previa en vivo

Mantén para eliminarMantén presionado el botón, o la tecla Espacio, hasta que el anillo se complete.

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { HoldToConfirm } 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.

Prop	Tipo	Por defecto	Descripción
children	ReactNode	"Mantén para eliminar"	Texto de abajo mientras no se presiona.
holdingLabel	string	"Sigue presionando…"	Texto mientras se mantiene presionado.
confirmedLabel	string	"Eliminado"	Texto cuando se confirma.
duration	number	1200	Milisegundos que hay que mantener presionado.
color	string	"#ff5a64"	Color del anillo y del brillo.
confirmedColor	string	"#34d399"	Color del anillo cuando se confirma.
size	number	96	Diámetro del botón, en px.
resetAfter	number	2200	Milisegundos para volver al estado inicial tras confirmar (0 = se queda confirmado).
icon	ReactNode	""	Icono propio; si falta se usa un bote de basura.
disabled	boolean	false	Desactiva el botón.
onConfirm	() => void	""	Se llama al completar la pausa.

Onda
Gratis
Botón cuya onda nace exactamente donde haces clic: un frente luminoso con anillos que cubre hasta la esquina más lejana.
Botones
Botón líquido
Pro
Botón que se llena de líquido desde el punto exacto por donde entra el cursor, con borde de menisco y burbujas de luz, y se vacía hacia donde sale.
Botones
Palanca metálica
Pro
Interruptor de palanca físico con clic.
Botones