Buttons

Rising tooltip icon button

A chrome-free icon button whose glyph swells and turns warning-colored on hover while a small label chip rises in above it after a short delay.

Using Rising tooltip icon button

A chrome-free icon button whose glyph swells and turns warning-colored on hover while a small label chip rises in above it after a short delay.

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, label, growth, delaySeconds, size

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2572Snap back icon buttonButtonsA bare glyph button that grows smoothly under the pointer and snaps back to its resting size the instant it is pressed.

2536Dashed outline tooltip buttonButtonsA dashed ghost button that floods with its accent on hover or focus while a pointed tooltip unrolls out of the edge nearest the button.

2698Icon swell tooltipButtonsA chromeless icon button whose glyph swells and recolors on hover while a label chip unfurls above it from its left edge.

2628Icon takeover deleteButtonsA destructive button split into a bold word and a narrow icon cell; hovering or focusing grows the cell across the whole button until only the glyph remains, with a two-tap confirm on touch.

2611Lifting glyph rowButtonsA short row of icon-only buttons where the hovered glyph lifts off the baseline while a soft circular tint fades in behind it, each item tinted in its own hue.

2657Tooltip tint icon rowButtonsA row of circular icon buttons where hovering one lifts a labelled bubble above it and floods both in that item's own tint.