Buttons

Tinted shadow buttons

A row of solid buttons that each cast a soft shadow in their own hue, so the color of every action bleeds onto the surface underneath it.

Using Tinted shadow buttons

A row of solid buttons that each cast a soft shadow in their own hue, so the color of every action bleeds onto the surface underneath it.

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: accent, count, hueSpread, shadowStrength, radius

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

1649Share fan buttonButtonsA share button that dissolves on hover while a row of square destination buttons unrolls out of its left edge, one after another.

2037Shrinking cap icon rowButtonsA row of round icon buttons whose fill hides behind a dark cap that collapses away on hover, uncovering the colour from the rim inward.

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.

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

2625Anaglyph wobble buttonButtonsA button that hangs in a slow 3D swing and, when hovered or focused, throws warm and cool duplicates of itself out of register with an overshooting wobble.

2518Annotated anatomy buttonButtonsA button that explains itself: hovering pops out measurement marks and leader lines naming its padding, fill, corner radius and icon slot.