HoldButton

Botón de “mantén para confirmar” con relleno líquido.

Código: RODD·MI·011
Familia: Microinteracciones
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/HoldButton-TS-TW

Cuándo usarlo

Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.

Props para personalizarlo

Prop	Tipo	Por defecto
children	ReactNode	"Hold to delete"
doneLabel	ReactNode	"Deleted"
icon	ReactNode	null
doneIcon	ReactNode	null
backgroundColor	string	"#27272a"
fillColor	string	"#5227FF"
textColor	string	"#f5f5f5"
fillTextColor	string	"#ffffff"
size	"sm" \| "md" \| "lg"	"md"
radius	number	14
fillDirection	"right" \| "up"	"right"
holdTime	number	2000
releaseTime	number	200
pressScale	number	0.97
wave	boolean	true
waveAmplitude	number	6
glow	boolean	true
resetAfter	number	1200
disabled	boolean	false
onHold	() => void	-
onTap	() => void	-
className	string	""

Otros efectos de microinteracciones

PeekRating — Valoración con estrellas que se levantan en ola al pasar.
RefineFrame — Marco que muestra el progreso de una imagen generada sin saltos.
ShinyButton — Botón con un brillo que lo cruza.
SpringCheck — Checkbox con muelle que marca, tacha y atenúa la tarea.
TearTicket — Entrada cuya matriz se arranca a mano con fibras de papel.
AnimatedBadge — Etiqueta con brillo animado para novedades.