Buttons

Pulse halo button

A solid button that keeps emitting a soft halo of its own color, either breathing in place or throwing off expanding rings on a loop.

Using Pulse halo button

A solid button that keeps emitting a soft halo of its own color, either breathing in place or throwing off expanding rings on a loop.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: label, accent, variant, cycleMs, distance

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2710Bouncing download buttonButtonsA compact dark download chip that bounces gently on its own to draw the eye, goes still the moment a pointer or keyboard focus reaches it, and swaps its arrow with a dip when pressed.

2602Breathing CTA pillButtonsA round-ended call to action that swells on hover and settles into a slow breathing pulse of scale and brightness until the pointer leaves or the button is pressed.

2677Halo ring buttonButtonsAn outlined button that throws a single ring outward when you hover it, the band expanding past the edge and thinning to nothing as it goes.

2467Answer call circleButtonsA round icon-only accept button with a handset glyph, a slow outward ring while a call waits, and a soft press dip.

2658Bouncing dot action buttonButtonsA dark accent-toned button with a small dot parked by its right edge that hops while the block brightens and casts a soft glow on hover or keyboard focus.

2470Breathing transport toggleButtonsA tinted playback chip that swaps between play and pause on click, its glyph breathing while the pointer rests on it.