Button groups

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

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.

Block level: Using block level button groups will allow the group to stretch the full width of the view port. This is useful for smaller viewports.

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.