Fieldbook
Sign in

Buttons

Panel swallow button

A 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.

Using Panel swallow button

A 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.

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, iconSide, expandMs

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

Shrinking cap icon row
2037Shrinking cap icon rowButtonsA row of round icon buttons whose fill hides behind a dark cap that collapses away on hover, uncovering the colour from the rim inward.
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.
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.
Disc to Pill CTA
2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.