Orbit
ButtonGroup
Source
Renders one or two related actions. The first is the primary button, the second a quieter ghost companion, so emphasis can never collide. The actions tuple caps the group at two at the type level.
Single action
A lone action renders as the primary button.
<ButtonGroup actions={[{ text: 'Save', onClick: onSave }]} />Two actions
With two actions, the first is primary and the second is a ghost button. They stack vertically on mobile and sit in a row from the small breakpoint up.
<ButtonGroup
actions={[
{ text: 'Save changes', onClick: onSave },
{ text: 'Cancel', onClick: onCancel },
]}
/>Loading & disabled
Each action can show a spinner via loading or be disabled — derived straight from the Button API.
<ButtonGroup
actions={[
{ text: 'Saving', onClick: onSave, loading: true },
{ text: 'Cancel', onClick: onCancel, disabled: true },
]}
/>Props
ButtonGroup owns variant and size; actions can pass Button props (for example onClick, loading, and disabled) plus text.
One or two actions, as a tuple. The first renders as the primary (default) button, the second as a ghost button. Each action takes text, onClick, loading and disabled — variant and size are owned by the group.
Button size applied to every action in the group.