Fieldbook
Sign in

Buttons

Joined action bar

A row of buttons welded into one bar with collapsed hairline seams, rounded only at the outer ends, and a trailing square segment that opens an overflow menu.

Using Joined action bar

A row of buttons welded into one bar with collapsed hairline seams, rounded only at the outer ends, and a trailing square segment that opens an overflow menu.

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: orientation, segments, size, showTextSegment, accent

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

Joined Button Group
2175Joined Button GroupButtonsA row of buttons fused edge to edge into one segmented control, with shared seams that brighten between whichever two buttons are hovered or pressed.
Border brighten button
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.
Double bevel button
2645Double bevel buttonButtonsA pale button that reads as a moulded key thanks to two opposed inner shadows, one dark from above and one bright from below, meeting behind a cool grey ramp.
Elevated chip button
2534Elevated chip buttonButtonsA pale rounded chip resting on stacked soft shadows that tints toward the accent on hover and sinks onto a deeper shadow with an accent outline when pressed.
Icon label toolbar
1710Icon label toolbarButtonsA compact toolbar of quiet icon buttons, each drawn in its own tint, with a leading back button whose label unfurls out of the icon on hover.
Icon swell tooltip
2698Icon swell tooltipButtonsA chromeless icon button whose glyph swells and recolors on hover while a label chip unfurls above it from its left edge.