Usage

Buttons are a vital element in creating a positive and productive user experience and one of the most important design elements to guide a user through the product or webpage. There exists a visual hierarchy of buttons to distinguish between most and less important actions to achieve an optimal user flow.

Therefore we created different types:

Action Button
Primary Button
Secondary Button
Tertiary Button
Icon Button
Links
Special Button Types

Button Types

Type	Usage	Side note
Call-to-Action Button (CTA)	This button should be a strong visual indicator to help the user to complete their journey and to achieve our business goals. Used in cases, where the user may want to go Next, Complete, Start or Buy.	Limit CTA Button usage to only once a visible section on a screen, otherwise you might loose the visual hierarchy of priority.Exception: For repeating elements with a CTA action, e.g. cards, in that case there can be shown more than one CTA on a screen area. But never use more than one CTA within the same element.
Primary Button	This button is used when no CTA button is required but the action is still important enough to be pointed out. It is a strong visual indicator to help the user to navigate to trough his goals. e.g. Upload, Save, Dialog Primary Action.	Limit Primary Button usage to only once a visible section on a screen, otherwise you might loose the visual hierarchy of priority.Exception: For repeating elements with a Primary action, e.g. cards, in that case there can be shown more than one Primary button on a screen area. But never use more than one Primary button within the same element.
Secondary Button	This button describes the secondary action, which is less important than the primary and CTA action and should appear less strong visually. Used in cases, where the action is on a secondary level, e.g. “cancel”, “go back” or next to a primary/CTA button.	Also often used in groups of buttons to ensure the hierarchy.
Tertiary Button	This button is used on less important, repeating actions in one screen. It is designed discreetly to simplify the UI visually.	Can be used without icon or icon left and right to support the meaning of the button.
Icon Button	This button is used to describe functions and actions with icons only or in combination with text. It should help to understand a UI quickly, to reduce long reading and saves place on screen. Typically used for standard functions “Remove”, “Zoom in/out”,… or function where a clear symbol or icon can be found.	For highlighting functions like Buy/Shop you should use the CTA icon button style.Link to icon library
Link	Links are used primarily for navigation within a website, and usually appear within or directly following a sentence or text.

Special Button Types

Type	Usage	Side note
Split Buttons	Split buttons are used to combine similar actions in one button
Internal Link Button	Internal link buttons are used to point to a page within a website
External Link Button	External link buttons are used to point outside a website
Toggle Button	Toggle buttons can have two to more options. Used to toggle between different options.
Button Groups	Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.	It is also possible to have a single button beside a button group in the same style.If there is a call-to-action function in a button group you can highlight it in CTA style. Limited to only one CTA button in one group appearance.
Icon Button Groups	Button groups with icons are typically usage for editing functions. Multiple selection required.

Placement and alignment

Place single buttons or button groups in the usual scanning pattern of an interface of the western region, from left to right.

Make sure you only use one CTA button or Primary button in a button group or in the current visible screen area.

Order

Two buttons or more next to each other:

Button order horizontal: Primary actions on the right and secondary actions on the left.

Button order vertical, full-width: Primary actions on the bottom and secondary actions above.

Exception for: Buttons in marketing context or for countries where the reading directions are reversed (e.g. China).

Full-with

In certain scenarios, it may make sense to use full-width buttons that extend to the width of their container. Use this style sparingly, but some appropriate use-cases include:

Responsive behavior of buttons when it comes to scaling down, mobile design
Used in framed design decisions, like on the login page

Appearance & Design

Shape, size and spacing

Depending on the hierarchy and click/tap areas the button needs to have a specific size and spacing.

	Size	Usage
	Medium	The default button size, it is used for most cases.
	Small	Decrease button size when space is limited and the cation is less important.
	Large	Increase button size to bring prominence to buttons that have major impact. Use large buttons sparingly and once within a layout. e.g. Only in the hero section of the website.

Details & Measurements

It is important to respect the correct sizing of the buttons to be compliant with web accessibility rules.

Use a combination of rem and em units here to be flexible in sizing. If you are not familiar to that topic, check out following article. Basically, follow this two rules:

Size in em if the property scales according to its font-size
Size everything else in rem

Best practice

Don’t set font-size in the <html> to a pixel value because it overrides the user’s browser settings and this would impact the accessibility and proper resizing of web components. Instead, you can either choose to use a percentage value, or leave out the font-size declaration entirely.

Note: font-size will be set to 100% if you left it out entirely.

Find pre defined buttons sizes here:

Small Button	Medium Button	Large Button
Button text: 0.8125rem 600 Open Sans Border radius: 0.25rem Padding: 0.9375rem 2rem Margin: 1.25em 1.25rem	Button text: 1rem 600 Open Sans Border radius: 0.25rem Padding: 0.9375rem 2rem Margin: 1.25em 1.25rem	Button text: 1.25rem 600 Open Sans Border radius: 0.25rem Padding: 0.9375rem 2rem Margin: 1.25em 1.25rem
Small Button with Icon	Medium Button with Icon	Large Button with Icon
Icon size: 1.125rem Icon padding right: 0.5rem	Icon size: 1.375rem Icon padding right: 0.5rem	Icon size: 1.625rem Icon padding right: 0.5rem
Small Text Button	Medium Text Button	Large Text Button
Button text: 0.8125rem 600 Open Sans Padding: 0.6875em 1.25rem	Button text: 1rem 600 Open Sans Padding: 0.6875em 1.25rem	Button text: 1.25rem 600 Open Sans Padding: 0.6875em 1.25rem
Small Icon Button	Medium Icon Button	Large Icon Button
Icon size: 1.25 rem Padding: 0.625rem;	Icon size: 1.625 rem Padding: 0.625rem;	Icon size: 2.25 rem Padding: 0.625rem;
Small Icon Button	Medium Icon Button	Large Icon Button
Icon size: 1.25 rem Padding: 0.625rem	Icon size: 1.625 rem Padding: 0.625rem	Icon size: 2.25 rem Padding: 0.625rem

Secondary Button

The secondary button has the same sizing’s. Just add 1px border to this button.

Button States

Different states of a button makes sure that the user recognize it as interactive element and enhances the user experience.

Appearance

Split Button

Internal/External Link Button

Toggle Text Button

Group Buttons

Icon Group Buttons

Inverse Button States

There are some cases where you need to show buttons on different backgrounds, very dark and light ones. To guarantee enough color contrast, you need to adopt the colors accordingly.

Buttons on dark background

Buttons on teal background

Copy/paste CSS samples

Find here CSS of the different button states for copy/paste:

Inspect buttons styles for copy/paste via figma

Find colors and all different button styles in figma: Open in figma

Hint

Activate the inspect mode in figma by logging into with your google account
Select an item and on the right side panel you will find all details via the inspect mode

Button naming conventions (CSS)

Some suggestion and guidance for button naming in CSS files. Consists of:

btn stands for button
button type, like cta, primary, secondary, tertiary, icon, link, group, toggle

Naming List

Interaction & Animation

On Hover

Add cursor property on hover: pointer

Add hover animation:

opacity: 1;
transition: 0.2s;

On Click/Tab

Ripple effect for desktop

To support the on click interaction we invented a ripple animation to enhance the UX of a button.

The ripple animation represents our brand identity and is a intuitive because it mimics the touching of water. Inspired by the Material Design ripple.

Find and test also the animation here.
Find also a code sample within the talwind documentation. (WordPress, Theme)

Ripple effect for mobile

For buttons on mobile interfaces use instead of a hover effect a ripple effect. This will make sure to provide a user feedback that describes the certainty and accuracy when hitting a button.

On Load

Provide user feedback in processes, e.g. loading indicator, check mark and cross.

Not-ready state on buttons

Provide user feedback (help message) when clicking or taping on a button which is in a not-ready state, but essential to continue a user process. The hint message should include an explanation why the button is not ready and what the user needs to do to continue.

On a Icon Button

An icon button tooltip is used to describe the function or action of an icon button that has no label to provide clarity on what the button will do. Used on hover interaction desktop only.

As a fallback you can use title text, but be aware that a tooltip will provide the better UX in terms of focus.

Accessibility

Minimum touch size

MIT Touch Lab study found that averages for finger pads are between 10–14mm and fingertips are 8–10mm. The minimum touch target should be 38 px (10x10mm).

Due to that facts it is important to respect the correct measurements of a button, which you will find here.

Using proper color contrast

Text must have at least 4.5:1 contrast ratio towards the background. View color contrasts in our color palette or check here.

Focus Keyboard Accessibility

Focus handling on buttons needs to be provided to fulfill the latest WCAG requirements in terms of accessibility.

Make sure to activate focus handling on buttons when tabbing.
Css sample:

Expand source

For more information about focus handling see here.

UX writing for buttons

Using the right words for a button makes live easier for users and prevent mistakes in misunderstanding actions. There are some basic rules which should be followed:

1. Use descriptive action verbs:

This gives users a precise glue what the button will do. Avoid using generic labels like yes/no in a button.

2. Use precise diction and use task specific language:

There are some cases where it is needed to be precise in diction and where you need to focus on which task specific language, following the right action.

e.g. Remove vs Delete. It depends on the meaning what to use:

Remove implies that an item will be separated from a list or group
Delete implies that an item will be erased from a system

e.g. Submit vs Subscribe, Create Account, Send Message, Publish

Submit is a technical and generic term and is not focused on completing a specific task. Avoid using it!
Subscribe, Create Account, Send Message, Publish are more precise and task specific labels which describes the result of the action. This makes it pretty clear and better understandable. Use it!

3. Use active imperative form:

When you use the imperative form in an active voice, you minimize the number of words and make the button label easier to scan. Yes, … No, …. Exception Cancel case…

4. Use sentence style capitalization:

Due to better readability and acronyms (like BankID, eSignAnyWhere, OTP, LiveID,…) use no text-transformation like uppercase or title case.