Skip to main content

Components

Button

A component for CTA links that often are being used inside other components. A link is often used as a replacement for a button to use a more subtle approach. Primary buttons are used to emphasize the corresponding primary action on any page. This style should only be associated with a single action in the context of any page.

Related resources

Storybook:
  • Awaiting delivery
AEM components:
  • Awaiting delivery

AEM status:

Unavailable

Demo

Button Demo

Auxiliary buttons

Download

Download

Account - Logged out

Logged out

Account - Logged in

Logged in

Circle

Circle

Filter

Filter
Filter

Variables

Variables

The buttons look and feel can be changed through the variables that are applied to it. this can be done on the page, artboard, autolayout and component levels to swap styles easily. The available variables and differences are highlighted below. For how to apply the variables in Figma, have a look here


Background


Caption for table
NameMarketingLMDI
DefaultAccent/Solar/500Brand/LSEGBlue/500
HoverAccent/Solar/600Brand/LSEGBlue/600
ActiveAccent/Solar/700Brand/LSEGBlue/700
DisabledShade/200Shade/200

Text


Caption for table
NameMarketingLMDI
DefaultShade/000 (White)Shade/000 (White)
DisabledShade/500Shade/500

Icons


Caption for table
NameMarketingLMDI
DefaultShade/000 (White)Shade/000 (White)
DisabledShade/500Shade/500

Usage

When to use

Button’s are our main CTA. We want to use buttons to lead our user’s into the right direction. But of course we don’t know which direction that is and, furthermore these directions are not the same for every user. Check the list below of all variants and a short explaination on when to use which.


Primary

Use when there is a clear call to action on the page. This button should be the most prominent element on the page. When there are more than 2 call to actions on the page consider using links instead.


Secondary

Secondary buttons are used for an action or multiple actions on a page that do not represent the primary goal or action of the page.


Download

Whenever the CTA leads to downloading a document or file, this variant is used.


Account

An account button to sign in and get show account options if you are logged in.


Pagination

Used in page pagination


Filter

Use when there is a clear call to action on the page. This button should be the most prominent element on the page. When there are more than 2 call to actions on the page consider using links instead.


Pill

Used as an utility button to highlight secondary options or the ability to edit sections on the page.


Circle button

Is used in mobile context as a FAB to expand multiple options that must always be visible in the page. It can also be used to add items.

How to use

Buttons are usually placed at the end of content and can be aligned to the left, center and right. They sit below content that support the call to action.


Layout 1

Layout 2

General Do’s

Primary buttons should be the most visually prominent element on the page

Try use icons to draw more attention or convey more meaning

Labels should lead with an action

Provide clarity on where the user is taken

Write in sentence case

Write clear, short, sentences

General Don’ts

Avoid using more than 2 instances of primary button on the same page — instead, use secondary buttons or links

If the purpose of the call to action is to take the user to a destination, consider using a link instead

Try not to rely on the context or surrounding content

Don’t include punctuation