Fieldbook
Sign in

Buttons

Shrinking cap icon row

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

Using Shrinking cap icon row

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

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, size, revealMs, pressScale

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

Panel swallow button
2398Panel swallow buttonButtonsA button with a darker icon panel docked at one edge; on hover or keyboard focus the panel grows across the whole width and the label fades beneath it.
Slide under download button
2513Slide under download buttonButtonsA labelled button that slides a bright action tray out from under its plate on hover or focus, with a bobbing download arrow inside the tray.
Tooltip tint icon row
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.
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.
Center out fill button
1848Center out fill buttonButtonsAn outlined uppercase button whose accent fill opens from a hairline at the center out to both edges on hover or focus.
Circle plus add button
2695Circle plus add buttonButtonsA wordless add button whose plus sign draws its two strokes outward from the centre on hover while the fill deepens.