Buttons

Warm band action button

A large rounded call to action carrying a warm color band that slides under the label on hover, with a bolt glyph in front.

Using Warm band action button

A large rounded call to action carrying a warm color band that slides under the label on hover, with a bolt glyph in front.

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, showIcon, radius, scale

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

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

1629Arrow wipe call to actionButtonsA call to action whose darker plate wipes in from the left on hover while a tucked arrow slides out to meet the label, and pushes down a pixel when clicked.

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.

2661Flat to flow buttonButtonsA flat solid button that swaps to a wide two-tone band scrolling endlessly across its face while hovered or focused.

2700Invert and lift buttonButtonsA tall outlined button that inverts to a solid fill and lifts a couple of pixels on hover, then settles flat again when pressed.

2776Press down sweep buttonButtonsA solid button whose fill washes brighter from one side on hover and drops flat against the page while it is held.