ButtonGroup

Buttons can be grouped together as individual segments of related actions.

Each segment in a ButtonGroup is comprised from our default Button component and can be visually represented with the same Button types and states.

Grouping buttons with a ButtonGroup is better than rendering buttons close together for the following uses:

• rendering a group of buttons next to one or more buttons
• grouping multiple sets of buttons
• saving horizontal space when rendering multiple closely-related buttons

Best practices

• Use ButtonGroups to organize similar functionality. Don't group buttons just because they're close together.
• For most use-cases, only default Button types should be used in ButtonGroups. In rare cases, primary buttons can be included in ButtonGroups but there should only ever be one primary Button (if any) in a ButtonGroup.
• Avoid grouping too many buttons together. It could be overwhelming to the user.
• Do not use a ButtonGroup to indicate a selection. Use a SegmentedControl instead.
• Do not use a ButtonGroup as a replacement for tab navigation components such as UnderlineNav (for links) or UnderlinePanels (for tabs).
• Avoid mixing buttons with text labels with icon-only buttons. However, it is acceptable to group a text-labeled Button with an icon-only Button with a down-pointing triangle that opens a dropdown menu of actions related to the Button.
• Do not group an invisible Button with buttons of another variant.