Sizes

There are four button group sizes, make sure when laying out forms that your button group size and field sizes are aligned.

Block

Using block-level button groups will allow the button group to stretch the full width of its container, which is useful for smaller viewports. Use the 'Demo' button to see this component working responsively.

Multiple items

We recommend only using up to 3 items in a button group, any more can become too difficult to scan and can become problematic at smaller viewports. Is also best to keep the labels short.

Error state

User experience

Button groups are a series of buttons grouped together on a single line to create a toggle. Behind the scenes in code, they work much the same way as radio buttons.

As button groups tend to break on small screen sizes especially when using more than two (see do's and don'ts) and when using long copy (the text wraps inside the button), it is recommended to use sparingly. If the label lengths are too long or there are too many choices, they become hard to scan, losing efficacy. Our eyes lose the shape of the words as they are housed in 'block containers', making it more difficult to distinguish each word/choice, slowing down the user and increasing their cognitive effort.

Consider the two-button button group when designing forms for questions with yes/no answers.

It's important to note that button groups differ from switches.

Visual design

Button groups inherit styling from buttons, see Buttons for more information.

Dos and don’ts

• Only use up to 3 items in a group
• Do keep the labels short to aid scanability and avoid text wrapping
• If you have long labels, or more than 3 options, use radio buttons.

Where is this available?