Button

Buttons are clickable elements that represent a call to action and trigger user interactions.

Principles

Button variants

For each situation, there is a perfect button type. Each button variant has a specific

function and should be used exactly as is intended.

Usage

Each button variant has a different priority and emphasis. Do not use the same variants for all buttons to allow specific ones to stand out faster.

Primary button: High priority

Applying monochromatic colours to the layout will help the buttons stand out from other elements easily.

Secondary button: Medium priority

Using a container (border shape) allows secondary buttons to stand out and be found but not as quickly as primary buttons.

Text button: Low priority

The absence of a container creates minimum contrast within the layout but helps to represent actions inside cards and dialogs

Icon Button

Use icon buttons to represent obvious actions placed in predictable parts of the layout.

Do

Use medium or low priority button variants in high-usage situations

Use medium or low priority button variants in high-usage situations

Don't

Use many high priority button variants or when the container has a lot of information

It distracts and overwhelms users from choosing as the layout becomes too crowded and everything looks like it's of high importance.

Don't

Use buttons for actions that are uncommon or self-explanatory

Actions should have a logical purpose behind it.

Variants Hierarchy

Start with primary button variants (high priority) for the most critical actions, then apply secondary button variants (medium priority) for actions with lower importance. Keep in mind that you should only group together actions that have a relationship to one another.

Do

Use medium or low priority button variants next to a high priority one to maintain proper hierarchy

Don't

Use the same button variant for all actions

Use higher priority variants for important actions, and lower priority variants for low priority actions.

Do

Use secondary button (outlined button) with primary button

Do

Use text button with secondary button (outlined button)

Do

Use the text button twice when two choices of equal action are available

Don't

Force users to choose by applying different colours

Application

Landing page concept using Hero CGI image

Placing

Please take into consideration the user behaviour through their interactions in digital channels. This helps determine the correct button placement and prevent drastic changes from the predictable places users look at.

In most cases, buttons are placed at the bottom of the container like cards.

For more information, See Layout

Do

Place actions after or below the title and description

Don't

Place actions before the title and description

Primary Button States

Default

Primary Button

Hover

Primary Button

Disbled

Primary Button

Specs

Do

Use primary button for the most important action

Don't

Use primary button for a low value action

Text Button States

Default

Text Button

Hover

Text Button

Disbled

Text Button

Specs

Do

Use correct hover style container specs to create an accessible, clickable area

This container is not visible in the default state

Don't

Create text buttons without a container

It is not enough for user interaction and may lead to accessibility issues

Application

TDRA landing page concept "All Services" text button with icon

Icon Buttons

Universal icons can be used as buttons. Since buttons are expected to be easily understandable, a text label helps to do this efficiently. Be careful about which icon is being used as an icon button as there are no labels to help distinguish between them.

For information about Universal icons see Icon Guidelines

Application

Buttons with Icon

Icons can help better understand button actions and can be placed on the left (start) or the right of the button label (end).

For information about Universal icons see Icon Guidelines

Starting Icon Specs

Ending Icon Specs

Do

Match the icon size and stroke width with the button and label size

Don't

Pair text, icons and button labels of different sizes.

Writing for Buttons

Buttons label apply Actionable Verbs. They inspire users to act while clearly understanding what the button will do.

It always helps first to consider the actions set up for users and research on what terms users use for those actions.UX writers usually consider this while working on Microcopy.

For more information, see Tone of Voice

Do

Make the actions clear

A good example is to repeat the action asked of the user to communicate a confirmed response better.

Don't

Use vague labels that don't indicate a clear action.

'OKʼ is not a clear, direct response to the question.Verbs are more effective

Don't

Use labels with more than 4 words

Don't

Wrap labels

Application

Alternative Sizes

The default button variant size has a container with 40px height. There are two more sizes, one smaller and one larger, that can be used when you have less space or using smaller text and elements in the layout.Use larger buttons on hero section and headers.

Alter button size specs

Application

Large primary and text buttons have been used for this header variation (44px)

Small primary and text buttons have been used for this Initiatives section (36px)

Full Width Buttons

Another way to add more emphasis to buttons is by making them as wide as their container. This is useful when you want to create a stronger focal point on the CTA of the page.

Application

Don't

Use full width buttons when there is more than one focal point

Radius

Radius of the buttons has a significant effect on the interface personality. The more curved the buttons are, the more human — the less curved, the more formal.

The exact radius needed depends on your entityʼs brand positioning, on how human and how formal intend to be.

Specs

Rectangle (0% radius) button specs are the same as the primary button specs, while the rounded corner buttons label needs more padding.

After you find the right radius for your need, stick to it and donʼt change it on different pages or sections.

Don't

Use different radius for buttons. Stick to one radius across your website

Colours on Buttons

Buttons should use primary colour from your colour palette to stand out from the other elements in a layout. The exception is when the background is filled with primary colour, which you need to use white for the button colour

Do

Use saturated primary colours for buttons

Don't

Use primary colours with small contrast with neutral colours

Don't

Use functional colours for buttons if it misrepresents the label

These colours are used to represent positive or negative messages

Don't

Use light neutral colours for buttons

They are used to represent a disabled state

Button Styles

Here are alternative button styles you can use.

Alternative Primary Button

Alternative Secondary Button

Alternative Text Button

Icons in Motion

Negative Actions

You can communicate a negative action by using the assigned functional colour - red.

For more information about Functional Colours, Colour System

Do

Use functional colours for buttons if it misrepresents the label

These colours are used to represent positive or negative messages

Don't

Use light neutral colours for buttons

They are used to represent a disabled state

Call to Action (CTA)

CTAs prompts users to take action. They are distinctive, easy to find and straightforward.

Links

The difference between buttons and links are the actions they cause the users to perform. Buttons ask for specific actions from the users, such as “Submit” or “Cancel”. Links are used more for navigational actions, redirecting users to internal or external pages of information.

Text Links

Text links differ from text buttons regarding their positioning, style, length and action they signify. While buttons are placed where there is enough white space for them to be found easily, text links are not subject to specific positions and can be placed anywhere. Text buttons should contain no more than four words, whereas text link lengths are not defined by word length or the count. Additionally, text buttons are usually fewer in number than text links that are used more flexibly without limits.

Text link vs.Text button

Do

Use text links when you have to display a list of links

Do

Use text links when you have to display a list of links

Colour

Since text links are frequently grouped, applying a primary colour makes the layout seem ‘heavyʼ.Use neutral colours such as UAE Black instead.

Do

Use neutral colors for text links

Caution when

Use primary colours for text links

Listing

For containers with several text links, maintain enough white space to ensure they are separate from other links.

White Space

Use white space around the container to balance the layout

Spacing

Use at least twice the height as a margin for each link to aid accessibility

Adding links to elements

Some components, such as cards, can receive links. In this case, the whole container can act as a link button to direct the user to a new page.

Application

In the Services section, the whole area of each card (service) serves as a link, so there is no need to click on the arrow button icon. Clicking anywhere within the card area works.