Resources
Intro & Anatomy
Button groups organise a set of related actions together in a cohesive layout that establishes clear visual hierarchy between primary and secondary actions. Use button groups when presenting multiple related actions that users might choose between, e.g. form submissions with alternative options or content management actions.
Button Combinations
Multiple regular text buttons
with up to 3 buttons where only one can be primary
Regular buttons with icon button
where the text button must be primary and the icon button can be positioned left or right depending on context
Multiple icon buttons
for space-efficient secondary action groups
Best Practice & Usage
Button groups should contain only related actions with clear visual hierarchy.
Always position the primary action prominently and use consistent styling patterns to help users understand action priority and relationships.
Button Group is stacked horizontally by default, but can be stacked vertically on mobile or when there is minimal space.
The primary action is positioned to the far right in horizontal stacks and on top in vertical groups to follow natural reading patterns and user expectations.
Align button groups to the right of their container, with the primary action to the far right.
Button groups cannot be aligned left.
Use icon-only buttons for secondary or tertiary actions within the group.
Always use text buttons for primary actions within groups, except when all buttons are icon-only.
Always align buttons right, with the primary action as a primary button. Place all other actions to the left of the primary button in descending order of importance.
Only combine related actions in a button group, such as "Pay now" and "E. Never combine unrelated actions in a group.
Use buttons with icons to communicate the most critical action of a button group.
When the primary button doesn't have an icon, don't use icons in lower priority buttons either.
Stack buttons vertically on mobile, with the primary action on top.
Avoid stacking buttons horizontally on mobile.
When combining a primary button with an icon-only button, keep them together as a unit.
Buttons, especially icon buttons, should maintain their natural width and not be stretched to fit containers.
Theming
You can customise the spacing between the buttons as needed.