ButtonGroup

A ButtonGroup does not behave like a toolbar, so assistive technologies still interpret the buttons as unrelated. The grouping is purely visual.

As toolbar

By default, a button group does not behave like a toolbar, so assistive technologies still interpret the buttons as unrelated. The grouping is purely visual.

If you want to make the button group behave like a toolbar, you can add the role="toolbar" prop to the ButtonGroup component. This will communicate the appropriate role to assistive technologies.

When role="toolbar" is used, individual buttons aren't separately focusable. Instead, only one button receives focus, and users switch between all buttons in the toolbar using the cursor keys. This behavior is baked into the component.

Please note the toolbar keyboard interaction behaviors are currently implemented in Primer React only, and are not available in Primer View Components.

Descriptive buttons

Labeling buttons properly lets users know what will happen when they activate the control, lessens errors, and increases confidence.

Read more about descriptive buttons.