Ready to Use
Show details
Introduction
Button Group groups a set of related buttons together. Button Group is stacked horizontally by default, but can be stacked vertically on mobile or whenever there is minimal space. The primary action is to the far right in horizontal stacks and on top in vertical groups.
Usage
Do align right
Align button groups to the right of its container, with the primary action to the far right.
Align button groups to the right of its container, with the primary action to the far right.
Don't align left
Button groups cannot be aligned left.
Button groups cannot be aligned left.
Do use icon-only buttons for secondary actions
Use icon-only buttons for secondary or tertiary actions.
Use icon-only buttons for secondary or tertiary actions.
Don't use icon-only buttons for primary actions
Always use text buttons for any primary action within groups, except when all buttons are icon-only buttons.
Always use text buttons for any primary action within groups, except when all buttons are icon-only buttons.
Do use proper hierarchy
Always align buttons right, with the primary action as a primary button. All other actions are to be place on the left of the primary button, in descending order.
Always align buttons right, with the primary action as a primary button. All other actions are to be place on the left of the primary button, in descending order.
Don't combine unrelated actions
Only combine related actions in a button group, such as “Pay now” and “return to cart”. Never combine unrelated actions in a group.
Only combine related actions in a button group, such as “Pay now” and “return to cart”. Never combine unrelated actions in a group.
Do use icons in primary action buttons
Use buttons with an icon to communicate the most critical action of a button group.
Use buttons with an icon to communicate the most critical action of a button group.
Don't use icons in lower priority buttons
When the primary button doesn't have an icon, don't use icons in lower priority buttons either.
When the primary button doesn't have an icon, don't use icons in lower priority buttons either.
Mobile Specs
Do stack vertically on mobile
Stack buttons vertically on mobile, with the primary action on top.
Stack buttons vertically on mobile, with the primary action on top.
Don't stack horizontally
Avoid stacking buttons horizontally on mobile.
Avoid stacking buttons horizontally on mobile.
Do keep primary button and icon button together
In case of a combination of a primary button and an icon-only button, keep them together.
In case of a combination of a primary button and an icon-only button, keep them together.
Don't adjust button widths
Buttons, especially icon buttons, should not be adjusted to fit a certain width.
Buttons, especially icon buttons, should not be adjusted to fit a certain width.