Button Groups
Button group
Best for
Two to six peer options answering one question, where the choice changes a setting rather than the page
Anatomy
One container and one border when connected · 8px-gap pills when separated, and then more than one can be on · three sizes · no primary
Connected: one container and one border, so only one segment can be active. Nothing is emphasised — the row is one control with several answers in it.
Pagination bar
Best for
A group that walks through an ordered set — pages, steps, results
Anatomy
Grey pill track · Previous faded at the start · round number cells with the current one on white · ellipsis for the gap · Next as the primary
An ordered sequence, not a row of peers — so the ends outrank the numbers and the group carries a primary. Page 1 of 17.
Field group
Best for
Actions that only make sense against what is in the field they are welded to
Anatomy
The field's own header, hint and error · one or two buttons left, right or both · connected shares the field's border, separated sits beside it
The actions only make sense against what is in the field, so the group carries the field’s header, hint and error rather than its own.
Billing panel
Best for
The field group where it actually lives — a settings panel that commits
Anatomy
Plan badge over the heading · the field group with its own header, hint and meta · a switch row · who it is billed to · back and a primary that saves
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Button Groups
Button group
Best for
Two to six peer options answering one question, where the choice changes a setting rather than the page
Anatomy
One container and one border when connected · 8px-gap pills when separated, and then more than one can be on · three sizes · no primary
Connected: one container and one border, so only one segment can be active. Nothing is emphasised — the row is one control with several answers in it.
Pagination bar
Best for
A group that walks through an ordered set — pages, steps, results
Anatomy
Grey pill track · Previous faded at the start · round number cells with the current one on white · ellipsis for the gap · Next as the primary
An ordered sequence, not a row of peers — so the ends outrank the numbers and the group carries a primary. Page 1 of 17.
Field group
Best for
Actions that only make sense against what is in the field they are welded to
Anatomy
The field's own header, hint and error · one or two buttons left, right or both · connected shares the field's border, separated sits beside it
The actions only make sense against what is in the field, so the group carries the field’s header, hint and error rather than its own.
Billing panel
Best for
The field group where it actually lives — a settings panel that commits
Anatomy
Plan badge over the heading · the field group with its own header, hint and meta · a switch row · who it is billed to · back and a primary that saves
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.