Vibeset

Botón de mantener

Para lo que no se puede deshacer o cuesta dinero, un «¿Seguro?» se contesta sin leerlo. Mantener pulsado un rato obliga a querer hacerlo: el gesto es la confirmación. El progreso lo lleva un requestAnimationFrame que escribe una variable de CSS, no el estado de React. Hay dos capas con el mismo rótulo, una sobre otra y la de arriba recortada hasta donde llega el relleno, así que el texto se lee siempre. Y tres cosas de uso: el toque corto avisa en vez de no hacer nada, la pista va enlazada para lectores de pantalla, y puede pintar una vía visible para confirmar sin mantener, porque mantener excluye a quien no tiene pulso firme.

Y el original de React Bits: Hold Button

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Hold Button, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para acciones destructivas o que cuestan dinero, donde preguntar «¿seguro?» no basta. Sin diálogos de por medio.

Ojo con

Mantener pulsado exige pulso firme: da siempre otra vía de confirmar para quien no pueda. Y dile al usuario que hay que mantener, porque nadie lo adivina.

Accesibilidad

Cinco señales aria y teclado. El movimiento reducido aparece con una sola referencia: comprueba que la onda también se apaga.