Button - Migrated Version

The Button component is designed to attract the attention of a user and encourage them to take action. This action can take many forms, such as navigating to another page or submitting a form. 

The author can insert a button on a page to allow the site user to complete an action. The button's functionality and style are easy to configure through the dialog box.

There are several style options for the author to choose from to change the look of the button.  These options can be configured through the style system icon (displays as paintbrush) of the component.

Properties

Text
This field should include the text to display on the button.

Link
This field should contain the link that the button takes the user to. This could be a content page within AEM, an external resource, or an anchor.  Use the Selection Dialog to choose a path within AEM.

Icon
This field hould include the icon you wish to display on the button. Please note that this field can be left blank.

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

Theme

There are three style options that control how a button looks.  The first is the Button's theme.  There are two theme options - Dark and Light.  Examples of each are shown below.

Dark themed buttons have White Title Case text and live in your agency's chosen theme color rectangle. On this page, it is shown in Water Blue. Similarly, the dark themed links appear with dark text.

• The Dark themed button or link option should be used when the page is white or light so that it stands out against the background.
• The Hover State for the Primary Button • Dark Theme has a Water Blue Light bacgkround. 

• The Light themed button or link option should be used when the page is dark so that it stands out against the background.
• The Hover State for the Primary Button • Light Theme as a Pebble Gray background.

Type

The second option is the Button's type.  The Button component types are Primary and Secondary. Examples of each are shown below.

The Primary button type is composed of text within a rectangle.

The secondary button is similar in structure with the addition of an icon which is placed to the left of the text.

Variation

The final option is the Button's variation.  A Button component can be a button which is a rectangle with text inside or a link which is where the text appears without a rectangle behind it  Examples of each are shown below.