Buttons

Light pool button

A lit tube-sign button that spills a blurred pool of its own colour onto the surface beneath it and swaps figure for ground when hovered or focused.

Using Light pool button

A lit tube-sign button that spills a blurred pool of its own colour onto the surface beneath it and swaps figure for ground when hovered or focused.

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, intensity, poolSize, invertOnHover

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

1849Color swap play buttonButtonsAn uppercase play pill that trades its ground and text colors on hover, lifting as its colored glow turns dark.

1872Outline invert buttonButtonsA dark slate button ringed in a warm outline that trades every color with its border on hover and lifts on a shifting glow.

2466Add Then Confirm ChipButtonsA dark chip with a warm label whose plus rocks side to side on hover, then rotates into a tick and reports the item added.

2683Arrow wipe buttonButtonsA pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses.

2708Bevel press pillButtonsA dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed.

2641Border brighten buttonButtonsA dark button whose two pixel frame is the only moving part: it climbs to white on hover and collapses into a tight inner ring while the button is held.