Buttons

Segmented Toggle Row

A row of icon buttons fused into one bar where exactly one segment stays pressed, like an alignment picker.

Quarterly revenue climbed eleven percent as the growth team shipped three pricing experiments back to back.

Using Segmented Toggle Row

A row of icon buttons fused into one bar where exactly one segment stays pressed, like an alignment picker.

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: defaultValue

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

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.

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.

2466Add Then Confirm ChipButtonsA dark chip with a warm label whose plus rocks side to side on hover, then rotates into a tick and reports the item added.

2707Amber upload pillButtonsA warm gradient upload pill with a bright rim that widens its coloured cast and lights the label from behind on hover.

2625Anaglyph wobble buttonButtonsA button that hangs in a slow 3D swing and, when hovered or focused, throws warm and cool duplicates of itself out of register with an overshooting wobble.

2518Annotated anatomy buttonButtonsA button that explains itself: hovering pops out measurement marks and leader lines naming its padding, fill, corner radius and icon slot.