Buttons

Glow halo button

A pill button with a duplicate of itself blurred behind it, so hovering blooms a soft colored halo while the fill slowly drifts.

Using Glow halo button

A pill button with a duplicate of itself blurred behind it, so hovering blooms a soft colored halo while the fill slowly drifts.

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, companion, glow, driftSeconds

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

2475Halo glow buttonButtonsA dark pill whose blurred accent halo fades in on hover and travels around the edge while a thin inner ring brightens.

2707Amber upload pillButtonsA warm gradient upload pill with a bright rim that widens its coloured cast and lights the label from behind on hover.

1926Brightening gradient buttonButtonsA deep two-tone chip whose vertical wash climbs to a much brighter pair of the same family on hover, with a fixed glass highlight along its top edge.

2471Center bloom buttonButtonsA solid rounded pill that brightens from the middle out as a pale circular wash grows past its own edges, then sinks flat when pressed.

2314Charge Up Action ButtonButtonsA charcoal pill that lights into a saturated gradient key on hover, lifting off the surface while its mark turns and brightens.

2598Clamp jaws glow buttonButtonsA hollow outlined button whose side tick marks slide in, merge into jaws, and close over the label with an accent glow on hover or focus.