Buttons

Joined Button Group

A row of buttons fused edge to edge into one segmented control, with shared seams that brighten between whichever two buttons are hovered or pressed.

Using Joined Button Group

A row of buttons fused edge to edge into one segmented control, with shared seams that brighten between whichever two buttons are hovered or pressed.

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, buttonCount, 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 code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2225Segmented Toggle RowButtonsA row of icon buttons fused into one bar where exactly one segment stays pressed, like an alignment picker.

1639Joined action barButtonsA 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.

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.

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.

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.

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.