Button

The Button component by design, gets the attention of the user and calls them to take action. The action can be in the form of navigating to another page, or submitting data such as a form.

The Button component's functionality is easy to configure through the dialog box.

There are a few style options which allow the button to appear properly.  These options can be configured through the style system icon (paintbrush) of the component.

Properties

Text
The text to display on the button

Link
Link to a content page within AEM, an external resource, or an anchor.  Use the Selection Dialog to choose a path within AEM.

Icon
Identifier for displaying an icon in the button

ID
This option allows control of the unique identifier of the component in the HTML and in the Data Layer.  If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.  If an ID is specified, it is the responsibility of the author to make sure that it is unique.  Changing the ID can have an impact on CSS, JS and Data Layer tracking.

Accessibility Tab

On the Accessibility tab, values can be set for ARIA accessibility labels for the component.

• Label - Value of an ARIA label attribute for the component

Style Choices

As mentioned before, there are four style options for how the Button can look - Default (dark button), White Button, Blue Link, and White Link.  Examples of each are shown below.

The default setting is a dark button with white text.

• Use the Dark button when the page is white or light so that button stands out against the background.
• The Hover State for the Button has a Water Blue Light bacgkround. 

• Use the White button when the page is dark so that the button stands out against the background.
• The Hover State for the Button has a a Pebble Gray background.

• Use the Blue Link when the page is white or light so that button stands out against the background.
• The Hover State for the Blue Link changes the text to Water Blue.

The White Link style choise is all caps text written in white.

• Use the White Link when the page is dark so that button stands out against the background.
• The Hover State for the Blue Link changes the text to Water Blue.