Botones

Skewed wipe swap button

Skewed wipe swap button: Un botón que cambia su etiqueta al pasar el cursor o al enfocar mientras un panel decorativo recortado se desplaza por su cara.

Hover either button, or Tab to it, to run the wipe.

Cómo usar Skewed wipe swap button

Skewed wipe swap 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
`restLabel`	`text`	`Hover to send`	Hasta 24 caracteres
`hoverLabel`	`text`	`Sent`	Hasta 24 caracteres
`accent`	`color`	`#FF4D8D`	Los metadatos no indican otro límite.
`skew`	`number`	`9`	De 0 a 20; paso 1
`speed`	`number`	`1`	De 0.5 a 2; paso 0.1

¿Para qué frameworks está disponible Skewed wipe swap button?

Skewed wipe swap 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 Skewed wipe swap button?

Los metadatos de React no indican dependencias npm adicionales a React.

¿Qué detalles de accesibilidad se observan en Skewed wipe swap button?

El código React de Skewed wipe swap 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 Skewed wipe swap button el movimiento reducido?

Skewed wipe swap 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 Arrow wipe call to action de Fieldbook, de la categoría Botones.

1629Arrow wipe call to actionBotonesUna llamada a la acción cuya placa más oscura aparece desde la izquierda al pasar el mouse mientras una flecha escondida se desliza hacia afuera para encontrarse con la etiqueta y empuja un píxel hacia abajo cuando se hace clic.

Imagen fija del componente Dot flood button de Fieldbook, de la categoría Botones.

1632Dot flood buttonBotonesUna pastilla delineada con un pequeño punto al lado de la etiqueta; Al pasar el cursor, el punto crece hasta que inunda todo el botón y la etiqueta cambia a su gemelo invertido.

Imagen fija del componente Drifting aura button de Fieldbook, de la categoría Botones.

2560Drifting aura buttonBotonesUna almohadilla inclinada con un suave relieve que despierta una banda de color borrosa detrás de sus bordes y deja que la parte más brillante se desplace alrededor del contorno.

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 Rolling Label Button de Fieldbook, de la categoría Botones.

1836Rolling Label ButtonBotonesUna pastilla compacta y brillante que enrolla su título fuera de la vista y muestra una segunda línea desde abajo al pasar el mouse.

2037Shrinking cap icon rowBotonesUna fila de botones de íconos redondos cuyo relleno se esconde detrás de una tapa oscura que se colapsa al pasar el mouse, descubriendo el color desde el borde hacia adentro.