Fieldbook
Sign in

Buttons

Shrink to icon button

A wide labelled capsule that narrows into a round icon button on hover or focus while the label drops out of frame and the icon flies in.

Using Shrink to icon button

A wide labelled capsule that narrows into a round icon button on hover or focus while the label drops out of frame and the icon flies in.

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, expandedWidth, height, duration, fromRight

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

Breathing Inset Button
2579Breathing Inset ButtonButtonsA pale moulded button whose inner panel pulls away from the rim on hover while the send glyph slides a short distance toward the label.
Expanding icon pill
2714Expanding icon pillButtonsA round icon button that stretches into a labelled pill on hover, trading its glyph for a word as an accent fill arrives.
Glide swap button
2715Glide swap buttonButtonsA fixed width button that slides its label off the right edge while the glyph glides into the centre, all sitting on a hard coloured ledge the button drops onto when pressed.
Icon takeover delete
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.
Icon tile flood button
2610Icon tile flood buttonButtonsA button with a solid accent icon tile at its left edge; hovering pours that accent across the pale body and flips the label ink to white.
Morphing backdrop button
2593Morphing backdrop buttonButtonsA bare text label backed by a coloured slab and a translucent corner disc that swell and square off into a new button face on hover.