Buttons

Icon swell tooltip

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

Hover an icon or tab through the row to read each label

Using Icon swell tooltip

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

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, iconSize, swell, openDelay

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

2697Download tooltip buttonButtonsA square icon button whose download arrow nudges downward and takes the accent color while a file-size caption unfolds beneath it.

2554Rising tooltip icon buttonButtonsA 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.

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.

2469Arrow to label pillButtonsA round chevron button that stretches into a wide labeled pill on hover, trading the mark for a word as the flat fill becomes a two-stop ramp.

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.

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.