A Button Group is a way to bring a set of 2-6 buttons together, often visually, that have related actions. The buttons should be independent from each other, i.e. clicking one button does not change the state of another button.
Any Paste components that use Button, including Popover, Modal, and Minimizable Dialog can be put into a ButtonGroup.
Button groups should be used to help bring together a group of related actions, rather than selecting from a set of options. Use a Radio Button Group to allow the user to select a single option from a group of mutually exclusive choices. Radio Buttons cannot be used within a Button Group.
By default, the Buttons in a Button Group are displayed horizontally with a margin between them.
Use the attached prop to make the buttons visually connected.
Use the icon variant when space is limited and the icons being used are easily recognizable (e.g., icons representing graph types). It is highly recommended to pair this variant with the Tooltip component to help ensure understandability.
Use a Menu to include more actions in the ButtonGroup, such as when there is limited space or there are more than 6 actions.
Button Groups:
- Should have between 2–6 options
- Are comprised of independent buttons
- Labels should use sentence case