Button

The button is a core component that allows for display and different configurations of a button item on a page. The button allows a user to interact with the page.

On This Page:

When to Use

This component is mainly used for directing a user to an action: engage with site content, subscribe to a mail list, or respond to a survey.

 

Web Standard

For the official usage policy see the Button Usage document.

Usage

By incorporating a button on a page, a user can be redirected to another page or take other action. The configuration can be used to create different size, shape, orientation and color of a button based on the official Button Usage Guidelines.

Configure Dialog

The configure dialog allows the content author to define the properties, and attach a link to the button.

Tab: Button

Dialog for Button component

Label – allows authors to display text on the button

Width – this configuration can change the width of the button

  • Four options are available: auto, 100%, 90%, 50%, and 25%

Size – This property allows the author to adjust the size of the button

  • Two options are available: medium (default) and large

Color – allows authors to change the color of the button

  • Four options are available: Engage — PMS Blue (default), Engage Secondary — Steel 50, Subscribe — Gold 700, Respond — Forest 700

Alignment – Used to place location of button on the page

  • 3 options are available: Left (Default), center, right 

Link – this configuration allows a link to another page within AEM, an external pop up, or even an anchor

Open in New Window – this configuration box allows the button to create an external pop up, to any link provided in the button tab

Developer Resources

See full information on buttons under Foundations > Button.

Is this page helpful?
Thumbs Up Image Yes Thumbs Down Image No
NO THANKS
255 characters maximum 255 characters maximum reached
Thank you for your feedback.
Comments or suggestions?

Top

Back to Header