Botones

Hop lift button

Hop lift button: Un botón redondeado que se levanta y salta en un bucle corto y repetido mientras se apunta, luego cae plano en un estado de presión más oscuro.

Cómo usar Hop lift button

Hop lift 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`	`Get started`	Hasta 24 caracteres
`accent`	`color`	`#9BE15D`	Los metadatos no indican otro límite.
`useAccentFill`	`boolean`	`false`	Los metadatos no indican otro límite.
`hop`	`boolean`	`true`	Los metadatos no indican otro límite.
`radius`	`number`	`8`	De 0 a 24; paso 1
`liftDistance`	`number`	`4`	De 0 a 12; paso 1

¿Para qué frameworks está disponible Hop lift button?

Hop lift 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 Hop lift button?

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

¿Qué detalles de accesibilidad se observan en Hop lift button?

El código React de Hop lift button incluye: El análisis no encontró elementos nativos de formulario o navegación, atributos ARIA ni manejadores de teclado explícitos en index.tsx. 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 Hop lift button el movimiento reducido?

Hop lift button consulta la preferencia de movimiento en su código React mediante useReducedMotion(). 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 Growing ledge button de Fieldbook, de la categoría Botones.

2566Growing ledge buttonBotonesUn botón de acento sólido que descansa sobre un borde inferior más oscuro que se espesa y se levanta al flotar, luego se adelgaza y se hunde al presionarlo.

Imagen fija del componente Bevel press pill de Fieldbook, de la categoría Botones.

2708Bevel press pillBotonesUna pastilla oscura biselada con un chip redondo empotrado en su extremo que se hunde en la superficie cuando se presiona.

Imagen fija del componente Cartridge fire button de Fieldbook, de la categoría Botones.

2312Cartridge fire buttonBotonesUn botón novedoso con forma de carcasa de latón, con un proyectil escondido detrás de su nariz que se dispara y recarga cuando se presiona.

Imagen fija del componente Dialog bevel button de Fieldbook, de la categoría Botones.

2509Dialog bevel buttonBotonesUn pequeño botón de sistema gris construido a partir de dos biseles duros anidados y una marca de enfoque interna punteada, cuyas líneas de bisel se intercambian al presionar para que se lea como si estuviera presionado.

Imagen fija del componente Edge Collapse Button de Fieldbook, de la categoría Botones.

1852Edge Collapse ButtonBotonesUn botón plano con un labio grueso de color a lo largo de su borde inferior que se pliega hasta formar una línea de cabello cuando el botón cae sobre él.

Imagen fija del componente Elevated chip button de Fieldbook, de la categoría Botones.

2534Elevated chip buttonBotonesUn chip pálido y redondeado que descansa sobre sombras suaves apiladas que se tiñen hacia el acento al pasar el mouse y se hunden en una sombra más profunda con un contorno acentuado cuando se presiona.