Overview
Button Group
Combines the triggers for a few related features into one interface element.
Overview
It’s a fundamental part of your interface that users need to press to make the action you want them to take. Button groups are a collection of several related actions that a user can take.
When to use
- To group several actions with similar purposes.
Best Practices
- Not all buttons in a group require an icon, but buttons with icons should always be of a higher priority than ones without icons. If the most critical action in a group doesn’t have an icon, don’t use icons in the remaining lower-level actions.
- The order of button priority should match the alignment of surrounding text. When text is left-aligned, buttons should be arranged so that the leftmost button is the most critical. When text is right- or center- aligned, the most critical action should be the furthest right.
- Be thoughtful about how multiple buttons will look and work on small screens.
- Group together calls to action that have a relationship.
Recommended resources
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more