Botones

Pulse halo button

Pulse halo button: Un botón sólido que sigue emitiendo un suave halo de su propio color, ya sea respirando en su lugar o lanzando anillos en expansión en un bucle.

Cómo usar Pulse halo button

Pulse halo 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`	`Join the waitlist`	Hasta 28 caracteres
`accent`	`color`	`#7C5CFF`	Los metadatos no indican otro límite.
`variant`	`select`	`breathe`	Opciones: breathe, ring
`cycleMs`	`number`	`1500`	De 600 a 4000; paso 100
`distance`	`number`	`8`	De 2 a 28; paso 1

¿Para qué frameworks está disponible Pulse halo button?

Pulse halo 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 Pulse halo button?

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

¿Qué detalles de accesibilidad se observan en Pulse halo button?

El código React de Pulse halo button incluye: atributos y manejadores (aria-hidden, onKeyDown, onKeyUp); comparaciones de teclas (Enter, Space). 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 Pulse halo button el movimiento reducido?

Pulse halo 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 Dot matrix arrow button de Fieldbook, de la categoría Botones.

2527Dot matrix arrow buttonBotonesUn botón dibujado como filas de puntos se convierte en una punta de flecha hacia la derecha que se desliza hacia los lados y hacia atrás en un bucle lento mientras está suspendido o enfocado y se comprime hacia su punta cuando se presiona.

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 Drifting halo button de Fieldbook, de la categoría Botones.

2764Drifting halo buttonBotonesUn botón oscuro rodeado por un marco de halo ligeramente más grande en el que una banda brillante del acento se desplaza sin cesar alrededor del perímetro, iluminando y levantando la placa al flotar.

Imagen fija del componente Focus halo button de Fieldbook, de la categoría Botones.

1696Focus halo buttonBotonesUn botón sólido que se invierte en un contorno al pasar el puntero y crece en dos anillos translúcidos apilados en el momento en que se enfoca el teclado.

Imagen fija del componente Glow halo button de Fieldbook, de la categoría Botones.

1828Glow halo buttonBotonesUn botón de pastilla con un duplicado de sí mismo difuminado detrás de él, por lo que al flotar florece un halo de color suave mientras el relleno se desplaza lentamente.

Imagen fija del componente Launch orbit button de Fieldbook, de la categoría Botones.

2376Launch orbit buttonBotonesUna píldora que emite un anillo hacia afuera en un bucle, dispersa sus motas de polvo al flotar y envía una pequeña nave girando a través de la etiqueta.