5
New Styleguide page for "Loading"
Introduce CDN links to all images
Add Section with index-tiles to branding page
New Styleguide page for "Branding"
FC
Extend ".wui-bs-alert" with all fruit-color-variantes
Font-Awesome has been updated to version 5.12.0
Ut
"Utils" has been extended with opacity, heights and colors
1

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe

Buttons

Standard buttons

Sometimes using the right button can be more difficult as it seems. That's why you should always ask yourself two questions:

  1. What are the users intentions when they enter the particular context?
  2. How important is the button to help the user to get to the next step or fulfil his/her task?

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.

                        
                          
<button class="wui-btn wui-btn--primary">Primary</button>

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.

                          
                            
<button class="wui-btn wui-btn--outline wui-btn--primary">Secondary button</button>

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.

                        
                          
<button class="wui-btn wui-btn--default">Default</button>

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.

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.

                        
                          
<button class="wui-btn wui-btn--ghost">A ghost button</button>

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:

  1. There is not enough space to use a text button
  2. 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.

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):

"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):

"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):

"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