#Overview
Buttons are the primary interaction element on our interfaces and come in different styles and sizes.
There are three types of buttons:
- Button (40px height) with or without an icon
- Small button (24px height) with or without an icon
- Icon button
#When to use
- To allow the user to request an action from the system, such as adding an item to cart or saving a form
#Don’t use for
- Navigation in and between pages (use a Link)
#Anatomy
When an icon is used in a button, it follows the text behavior.
#Button
- Desktop: Button, button with icon
- Desktop: Button small, button small with icon
- Mobile button: usually fixed at 100% content width (there can be exceptions - see “Placement: Mobile width and order” below.)
#Icon button
- Desktop icon button
- Mobile icon button
#Minimum touch target
On mobile devices, the minimum width and height for touch targets in buttons is 40px. 48px is preferred.
#Best practices
#Buttons do things, links go places
Do
A button performs an action in the system.
Don't
Don’t use buttons for navigation in or between pages. Use a link for this.
#Keep it clean
Do
Keep the interface focused and straightforward. Ideally only one primary button should be visible at any one time.
Don't
Avoid too many buttons on a page. It can degrade the website experience and overwhelm the user.
#Avoid disabled buttons
Do
Instead of a disabled button, show an error to explain to the user why they cannot proceed.
Don't
Avoid using disabled buttons because they leave the user to figure out what they should do to enable them again.
#If you really need to use a disabled button...
Do
If a disabled button is required, include a tooltip to explain to why it cannot be clicked.
Don't
Without an explanation, the user does not know why the button is disabled.
#States
#Primary button
Galaxus
Digitec
- Normal
- Hover
- Focus
- Focus-visible
- Active
- Disabled
#Standard button
Galaxus
Digitec
- Normal
- Hover
- Focus
- Focus-visible
- Active
- Disabled
#Icon button
Galaxus
Digitec
- Normal
- Hover
- Focus
- Focus-visible
- Active
- Disabled
#Placement
#Mobile width and order
Since the space on a smartphone is smaller, buttons are almost always displayed using the full width of the display. There are are exceptions for half-width buttons. If more than one button is needed they are grouped and aligned vertically.
Do
Buttons on top of each other can be understood quickly.
Do
When possible, ONE primary action should be highlighted.
Do
Buttons can be half-width. This structure helps emphasise the main action.
Don't
Different widths are difficult to read.
#Buttons in forms and dialogs
Buttons are always aligned on the right-hand side. If there are several buttons, they are grouped on the horizontal or vertical axis. The reading flow is taken into account and the desired action is displayed first.
Do
The most important action comes first. The "Cancel" action is always regarded as less important for ordering.
Don't
Don’t place the “Cancel” action first.
Do
Group buttons to make them more comprehensible.
Don't
The visual separation of the buttons makes it more difficult for the user to quickly grasp the content.
#Buttons in tables
Buttons in tables follow the same rules for order and position as in forms and dialogs.
Do
As few buttons as possible should be used in tables. Often the most important functions can be represented as icons.
Don't
Avoid too many buttons in a table.
