Sometimes using the right button can be more difficult as it seems. That's why you should always ask yourself two questions:
- What are the users intentions when they enter the particular context?
- How important is the button to help the user to get to the next step or fulfil his/her task?
Standard buttons
Button
When to use
Primary action
Primary buttons always trigger affirmative actions. They have the highest visual weight and will get the most attention. To help users fulfilling their tasks we use primary buttons to lead them through the different steps towards their goal. In order to support this it is important to have as few primary buttons as possible on each context. As a rule of thumb there should actually be just ONE primary button on each context.
```html
```
Secondary actions
The secondary button calls an action which is quiet important for the particular context. There can be more than one secondary button in each context.
```html
```
Default actions
As the name already suggests the default button is used for every action which is neither a primary nor a secondary button. There can be contexts without default buttons and there can be a lot of them calling similar actions, for example the "edit-button" in table overviews.
```html
```
Link button
Link buttons have the lowest visual weight. They provide the user with additional information and actions but they don't distract from the main tasks of the user. In many cases link buttons lead to another site.
```html
```
Ghost button
The ghost modifier reduces a button to a mere shadow of itself - a ghost. Ghost buttons are (of course) only visible when the background is colored/dark.
```html
```
Advanced button settings
Appart from the importance of a button there are various types of buttons to use and different things to keep in mind when working with them.
- Consistency. Use the given wui-buttons. Do not build your own.
- Hierarchy. Always pay attention to the visual weight of each button. Also in combination with other buttons.
- Icons. Either text or icons. Never use both at the same time.
- Order. Acoording to the importance from left to right.
- Wording. Use clear and distinct labels.
- Customizable. The color of some buttons will vary according to the customers CI.
Button variations
Split buttons
There are default, secondary and primary split buttons which should be used according to their level of importance. There are several things to consider for the dropdown of a split button:
- Don't hide delete options in split buttons
- The label of the main button may not be found in the dropdown list again
Small buttons
In general we use the wui-standard buttons. You always have to consider the importance of the action which is triggered and the visual weight that the buttons have on the particular context.
In some widgets for example there are tables with a lot of default buttons standing very close to each other. By that they create a high visual weight eventhough the provided information is not mandatory for the user to fulfil her/his tasks. In this exception you should use small buttons to reduce their visual weight.
Icon buttons
There are two purposes of using icon buttons:
- There is not enough space to use a text button
- Reduce the visual noise when there are to many buttons which can't be relocated somewhere else on the site. This applies in particular for the header where icon buttons are frequently used in form of a toolbar.
When using icon buttons it is very improtant to choose a good icon. Make sure that the same icons are always used for the same actions across the platform. In case the user won't understand the icon it is also important to use a precise title attribute and a tooltip to describe the action.
Dismissive buttons
Dismissive buttons play a very important rule for the user experience because these are the buttons that can really hurt users working on their tasks. In order to prevent the user of accidentally choosing a dismissive button it should always signalise their destructive action but never be more prominent than a primary button. To make sure that the primary action still gets the most attention it is sometimes necessary to reduce the visual weight of the delete button. In these cases the dismissive button is not marked red but - especially than - there will always be a modal to confirm the destructive action. In this confirmation modals the destructive button is the most important action and therefore a red secondary button.
Icon button
Secondary action
Primary action
Button order
If there is more than one button the order of the buttons is increasing from left to right according to the hierarch level.
Wording
The label text of a button depends pretty much on the given context. We try to avoid words like “Yes” or “OK” to describe an action and use significant verbs whenever it is possible. In some cases it also makes sense to extend the button labels by variables like usernames or numbers to provide more details to the user.
Examples of common patterns for the wording of buttons
In the process of creating a new item the wording of buttons changes depending on the next potential step of the user (e.g. Groups):
Wording
When to use
"New group"
There is not the right group for the user’s purpose so the user needs a New group.
"Create group"
After setting everything up for your new group the user wants to Create the group.
"Update group"
If the group already exists the user can make changes and Update the group.
The label gets extended by a variable depending on the number of items the user chose (e.g. Shopping lists):
Wording
When to use
"Select list"
No item
"Add item to list"
One item
"Add item to 2 lists"
Two items
The variable of the label holds the username (e.g. User):
Wording
When to use
"Act as John Doe"
Labeltext when looking on John Doe’s profile.
"Act as Max Mustermann"
Labeltext when looking on Max Mustermann profile.
Color Scheme
Customizable button colors
The variables for primary and secondary colors are customizable, so that you could edit these values according to your CI. In the case of wescale the variable for primary and secondary buttons contain the same color-values.
Keep in mind: Choose your colors considering the visibility. The buttons should have a good contrast on light backgrounds and for white label text. Keep also in mind that changing the "link-color" has an impact on every link in the platform.
Primary button
Text:
#ffffff
Backround:
#6d5daf
Border:
#6050a2
Text:
#ffffff
Backround:
#564891
Border:
#483c79
Secondary button
Text:
#6d5daf
Backround:
transparent
Border:
#6050a2
Text:
#ffffff
Backround:
#564891
Border:
#483c79
Link button
Text:
#6d5daf
Text:
#23527c
Non customizable button colors
The default buttons are always grey and non customizable. Because default buttons never ever trigger important actions it could get confusing for users when they appear in a very eye-catching color.
Dismissive buttons are also non customizable. Their color is related to the action they trigger. Every other color than red could lead the user to a wrong impression.
Default button
Text:
#626262
Backround:
#ececec
Border:
#dfdfdf
Text:
#626262
Backround:
#d3d3d3
Border:
#c1c1c1
Dismissive button
Text:
#f55753
Backround:
transparent
Border:
#f43f3b
Text:
#ffffff
Backround:
#f22823
Border:
#ee130e