Button Component button-component

The Core Component Button component allows for the configuration and display of a button item on a page.

Usage usage

The Core Component Button component allows for the inclusion of a button on a page.

Version and Compatibility version-and-compatibility

The current version of the Button Component is v2, which was introduced with release 2.18.0 of the Core Components in February 2022, and is described in this document.

The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.

Component Version
AEM 6.4
AEM 6.5
AEM as a Cloud Service

For more information about Core Component versions and releases, see the document Core Components Versions.

Sample Component Output sample-component-output

To experience the Button Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.

Technical Details technical-details

The latest technical documentation about the Button Component can be found on GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.

Configure Dialog configure-dialog

The configure dialog allows the content author to define the button and how it will behave and appear for a visitor to the page.

Properties Tab properties-tab

Properties tab of the edit dialog of Button Component

  • 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.
  • Open link in new tab - If checked, the link will open in a new browser tab.

  • Icon - Identifier for displaying an icon in the button

  • ID - This option allows to control 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 accessibility-tab

Accessibility tab of the edit dialog of Button Component

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

Styles Tab styles-tab-edit

Styles tab of the edit dialog of Button Component

The Button Component supports the AEM Style System..

Use the drop-down to select the styles that you want to apply to the component. Selections made in the edit dialog have the same effect as those chosen from the component toolbar.

Styles must be configured for this component in the design dialog in order for the drop down menu to be available.

Design Dialog design-dialog

Styles Tab styles-tab

The Button Component supports the AEM Style System.

Adobe Client Data Layer data-layer

The Button Component supports the Adobe Client Data Layer.