Button

Use buttons to trigger actions and links. Buttons contain a combination of a clear label and an icon while links are always text.
When using more than 5 buttons please use the Linklist Component.

There are four types of buttons

• Buttons with arrow icon:
  ... opens the target URL in the same window (the targetsite is in the current website)
• Buttons with external icon:
  ... opens the target URL in a new tab/window
• Buttons with download icon:
  ... opens a download in the browser standard
• Buttons with anchor link icon:
  ... skips to a certain anchor-point on a page (most common on the same page, but can also be on a different page)

Important! For internal links (arrow icon), you should manually select the path to that Product page from AEM (by clicking the icon next to the field "Button link"). This ensures that even if the page's link changes later, your Button will still work. It's also very important to do this on Language Master pages that can be rolled out to Live Copies, as this ensures that the URL structure will update correctly for each country.

• Based on the Bootstrap base-font-size of 16px small buttons and standard sized buttons have a font-size of 16px or 1rem.
• In general you will use the "normal" size.
• Button width depends on labelling (label + icon)
• Buttons must be single lined (labelling must be chosen to be as short as possible)
• Buttons are always flat without shadow.
• Buttons must have a color different to the background color they are placed on.
• The buttons inside the button component are aligned side by side and can wrap into a new line (though a accumulation of more than 2 buttons doesn't seem appropriate in most cases).
• Buttons should always be positioned below text (with same alignment) but not below images.

• Primary Buttons should occur only once per page, e.g lead generation is the prior task on Heropages, so this should be the only Primary Button.

• Secondary Buttons are used for most of the other cases.

• Tertiary Buttons are meant for further Download links or when background colour requires a better contrast.

• Buttons with arrow icon are for internal site targets. You have to use that button to open the target URL in the same window (the targetsite is in the current website). You can use that button as an internal call-to-action button.
  

• Buttons with external icon opens the target URL in a new tab/window. You have to use that Button if you link to an external website target.
  

• Buttons with download icon opens the download file. You have to use that Button if you want to insert a download asset.

• Buttons with anchor-link icon skip to a certain anchor-point (ID).