Botones

Hinged progress button

Hinged progress button: Un botón cuya cara gira hacia atrás al pasar el mouse, exponiendo una bandeja donde una barra de progreso llena ráfagas desiguales y se desvanece en todo su ancho.

Cómo usar Hinged progress button

Hinged progress button se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`label`	`text`	`Sync library`	Hasta 32 caracteres
`accent`	`color`	`#9BE15D`	Los metadatos no indican otro límite.
`tilt`	`number`	`35`	De 10 a 60; paso 5
`barDuration`	`number`	`1.2`	De 0.6 a 2.4; paso 0.1
`depth`	`number`	`800`	De 300 a 1600; paso 100

¿Para qué frameworks está disponible Hinged progress button?

Hinged progress button está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Hinged progress button?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx.

¿Qué detalles de accesibilidad se observan en Hinged progress button?

El código React de Hinged progress button incluye: elementos nativos (button); atributos y manejadores (aria-hidden). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Hinged progress button el movimiento reducido?

Hinged progress button consulta la preferencia de movimiento en su código React mediante matchMedia(prefers-reduced-motion). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Flip face button de Fieldbook, de la categoría Botones.

1633Flip face buttonBotonesUn botón con dos caras que intercambia una por la otra en un giro tridimensional, invirtiendo su posición cuando el puntero sale.

Imagen fija del componente Tilted deck button de Fieldbook, de la categoría Botones.

1898Tilted deck buttonBotonesUn botón colocado en perspectiva como una llave en una plataforma inclinada, inclinándose más hacia afuera y deslizándose hacia abajo cuando se suspende y se presiona.

Imagen fija del componente Collapsing share button de Fieldbook, de la categoría Botones.

2553Collapsing share buttonBotonesUna píldora etiquetada que se reduce a un glifo redondo mientras una tira de mosaicos de enlaces flota en el espacio que dejó.

Imagen fija del componente Extruded tilt button de Fieldbook, de la categoría Botones.

2767Extruded tilt buttonBotonesUn botón de pantalla pesado inclinado en perspectiva cuyas letras huecas son extruidas por dos desplazamientos duros que giran los lados cuando la placa se balancea al flotar y se aplana cuando se presiona.

Imagen fija del componente Hold to delete de Fieldbook, de la categoría Botones.

1636Hold to deleteBotonesUn botón destructivo que solo se activa después de mantener presionado el puntero el tiempo suficiente para que una barra de relleno lo recorra y rebobina en el momento en que lo sueltas.

2476Icon reveal chipBotonesUn pequeño chip delineado que se inunda con su acento al pasar el mouse mientras la etiqueta se desliza hacia la izquierda y un glifo oculto se desvanece desde la derecha.