Button Group blocks

A button group is a row of buttons treated as one control, sharing a container and answering a single question between them.

Get Pro to installPro10 blocksReact, Vue and Figma

28 NovemberWeek 45 · 14 events

Show

Showing Weekends, holidays

Every block in the set#

Two to six peer options answering one question, where the choice changes a setting rather than the page

A toolbar over a view: step through time, change the range and create in one control

Formatting controls that act on a selection: several styles, one alignment, one size

A group that walks through an ordered set: pages, steps, results

Actions that only make sense against what is in the field they are welded to

A field whose welded action depends on whether the value has been edited

An amount that can be read in two periods without leaving the field

A settings panel that commits: say what a change costs and when it applies before it is saved

Choosing a plan and a number of seats in one place, with the receipt in view

Terms that change what the customer is billed: edit them and read the invoice they produce

Two to six peer options answering one question, where the choice changes a setting rather than the page.
A filter row where several can be on at once and the spacing has to say so before anyone clicks.
Actions that only make sense against what is in the field beside them: copy a link, pick a date, set a currency.
An ordered walk through a set where moving forward deserves more weight than the steps between.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.