Table of Contents
Despite their small size, buttons hold significant importance as a UI element. Their history can be traced back to the early development of machinery and devices. For instance, mechanical buttons or switches were used in telegraphs and early telephony systems in the 19th century to transmit signals or connect calls.
As one of the most successful elements, buttons have made their way into user interfaces. Since then, numerous studies have been conducted to determine the best practices for button design. This article will focus on the best practices and techniques for designing button groups.
About button hierarchy
First, it is essential to understand the different types of buttons and their proper usage.
Button hierarchy involves categorizing buttons based on their level of importance. Depending on the design system being used, different names may be assigned to each level of importance.
In most cases, a three-level hierarchy suffices. According to M3 (Google’s design system), these levels are high, medium, and low emphasis. Alternatively, in some other design systems, they may be called primary, secondary, and tertiary.
There are four main types of buttons: filled buttons, toned buttons, outline buttons, and text buttons.
Filled buttons have a strong visual impact. They should be used for important actions that complete a flow, such as “Save,” “Join now,” or “Confirm.”
Toned buttons provide a middle ground between filled and outlined buttons. They are useful when a lower-priority button requires slightly more emphasis than an outline can provide, for example, “Next” in an onboarding flow. Or use it when you want to de-emphasize a filled destructive button. Some design kits avoid toned buttons because other types already provide sufficient hierarchy.
Outlined buttons are of medium emphasis and represent important actions that are not the primary focus of the app. They pair well with filled buttons to indicate alternative or secondary actions.
Text buttons are used for the lowest priority actions, especially when presenting multiple options. They are often embedded in components like cards, dialogs, and snack bars. Text buttons do not have a visible container in their default state, ensuring they do not distract from nearby content.
1. Button group orientation
A button group can be either horizontal or vertical in its orientation. You should only use the vertical option when horizontal space is limited.
For example, when designing on mobile. Otherwise, it’ll create a lot of unnecessary white space.
On mobile, where users tend to use horizontal scrolling, you can stack multiple buttons vertically and stretch them.
2. Button order – The primary button should stay in in the corner
Where do you place the primary button in a button group? left? right? top? bottom?
There is no right or wrong answer to this. It is more about making a call and sticking to it. Having worked in multiple design systems, this is my take.
Button groups can be left-aligned or right-aligned depending on the context or preferences. However, whatever alignment you choose the primary button should be in the corner.
Imagine it’s like this, when there is only one primary button, it’s in the corner.
So, to be consistent, the primary button – the most important button should stay where they are when adding other buttons.
If the buttons are fluid (extend to fill their parent container), the primary button should be on the left.
When buttons are arranged vertically, there are two scenarios: they can either scroll along with the content or remain fixed at the bottom. Regardless of the number of buttons (1, 2, or 3), applying the previous rule, the primary button should remain in the same position when adding other buttons. Can you guess where it is?
If the buttons are scrollable, the primary button should be placed at the top. However, if the buttons are fixed to the bottom, the primary button should be positioned at the bottom.
When the button group is vertically aligned in the middle, the primary button can be placed on either the left or right side. However, I prefer it to be on the left.
.
Note: There is no evidence of which kind of button alignment performs best in bring-in conversion. There are still feuds among designers that argue whether you should place the primary button on the right or left. You can read more in this article:
https://www.lukew.com/ff/entry.asp?571
Different design systems may have varying conventions regarding button placement, with some placing the primary button on the right and others on the left.
Regardless of the chosen convention, it is crucial to maintain consistency throughout the interface. If you opt for placing the primary button on the right in a modal, it is important to stick to this arrangement consistently.
The reason behind this alignment choice is to achieve visual balance. By positioning the most important button where users expect it to be, you enhance the user experience and facilitate seamless interaction.
3. Button group alignment
Button groups are aligned contextually. In general, button groups are left-aligned to follow content such as a block of text. They are center-aligned in the context of an empty state. And, they should be right-aligned inside container components such as dialogs, popovers, or cards.
The order of button priority should match the alignment of the 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.
4. Number of primary buttons in one view
The primary button conveys a high level of emphasis and should be used for actions that are crucial to the user experience.
There is a debate in some circles regarding the usage of multiple primary buttons in a single view. However, this argument is applicable only in ideal situations where there is only one main action we want users to take.
It is possible to use more than one primary button in the same view, but I recommend a maximum of three. Multiple primary buttons can draw attention to important actions and establish a clear hierarchy.
In situations where you have more than three actions of similar importance, it can become challenging to display them all as primary buttons. In such cases, you should consider using multi-secondary or tertiary buttons to prevent overcrowding in the design.
5. Button group style
When arranging multiple buttons together, it is crucial to ensure that users can easily differentiate between them. This means there should be a clear contrast between a filled button and a filled-tone button if you decide to combine the two.
All buttons should have a cohesive look as a group, which means they should share the same color scheme and design style. It is best to avoid mixing round pill buttons with box-shaped buttons.
6. Button group spacing
It is important to provide adequate spacing between the buttons to prevent users from mistakenly selecting the wrong one. As a rule of thumb, I usually recommend using a spacing of 16pt to ensure clarity and minimize any potential confusion.
7. Button matching
Following are some of the most common ways that you can match between primary, secondary, and tertiary buttons.
Primary with secondary
The combination of primary and secondary buttons is the most common. It is used when you have two actions for users to choose from, with one being more important than the other.
Primary with primary
This combination is less common but might still be necessary when you have two equally important actions. In such cases, you can choose to use two or more primary buttons.
But it’s not a good idea to use multiple primary buttons. When designing a system, you need to consider not only the current screen but also anticipate future scenarios. Will you need to add any additional buttons that require more emphasis? If not, using two or more primary buttons side by side can be a viable option.
For example, in the scenario mentioned above, the login buttons have similar levels of importance. The solution would be to design them as multiple primary buttons or multiple secondary buttons.
In cases where there are only two or three primary buttons, you can use different colors for each button to make it easier for users to distinguish between them.
In Figma design software, it is the same way. There are two equally important actions: creating a Figma file and creating a Figjam file. In this case, these two actions are represented by two primary buttons placed side by side, accompanied by a secondary button next to them.
Since the “Create Figma file” button is used more frequently, it is positioned on the edge.
Secondary with secondary
This is a more common choice compared to using primary buttons together. If you have multiple actions with equal importance, using multiple secondary buttons is the most appropriate option.
Using primary buttons together may create too many focal points and potentially disrupt the design balance.
Primary, secondary and tertiary
As the name suggests, if you have multiple actions to display, and they are ranked in order of importance from top to bottom, you can use this group of buttons.
Primary and tertiary
There is one important action and one less important action.
Secondary with tertiary
Two actions that are not very important, but one action is more important than the other.
8. Make it harder to find destructive buttons
You may have encountered this abomination if you are an HP Probook user.
The power button on the keyboard is positioned in the middle and is too close in proximity to other function buttons like delete and print screen. Many people have accidentally pressed this button and unintentionally shut down their computer screen while working.
The destructive button should be placed further away from the group of function buttons to prevent accidental clicks.
If you do need to include destructive buttons, it is important to make them less prominent than the primary action button. For example, you can make them appear less like buttons, smaller in size, or even present them as links. This way, users who intend to cancel or perform negative actions will actively search for them, while users who are focused on their tasks won’t be prone to making serious errors.
Hide buttons when there is too much action
According to Hick’s law, the time required to make a decision increases as the number and complexity of choices available grow. Therefore, it is important not to overwhelm users with too many options.
To address this, we can employ a technique called progressive disclosure in UI design. This involves gradually revealing information and options to users, allowing them to focus on the most relevant choices . You can do so by using:
Overflowing actions
In cases where you have tight spaces and multiple actions, you can overflow actions into a menu triggered by a button.
Action grouping
You can group similar actions into a menu button or a split button. A menu button with a designated, primary action is a split button.
Limit the group of actions to 7 or less. Remember to place the less frequently used actions in the form menu.
Conclusion
When it comes to arranging buttons, there isn’t one “best” way. But whatever way you choose, it’s important to stick with it and be consistent. One way to be consistent is by lining up buttons in a way that fits with what’s around them and putting the most important button in the corner where it stands out.
You also need to think about what users need to do and which actions are the most important for them. Some actions might be less important or even harmful, so you can make those buttons look different or put them further away to guide users.
If you have a lot of buttons and you don’t want to confuse people, you can use a trick called “progressive disclosure.” This means you show only a few buttons at first and then reveal more as people need them. It helps prevent people from feeling overwhelmed and lets them focus on what they need to do.
