The following is a general recommendation on pairing buttons of various hierarchy. This refers to Buttons that are next to each other, not across a screen. The goals can be described as:
Attached Button Groups are used for horizontal bars of buttons, like toolbars, and group related actions.
Button Groups can be used to attach dropdown menus to Primary Action buttons.
In space-constrained layouts, attached Button Groups will allow actions to live within a smaller footprint.
Using text buttons in a Button Group evenly spaces the buttons in content-heavy sections like tables.
Full width Button Groups are used to fill the space within a small content area like a Card or Modal.
With solid and outline buttons, it's recommended to set the buttons to equal width.
A Button Group should:
import { ButtonGroup } from '@servicetitan/design-system';