Button Component (v1) 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.
- The button’s properties can be selected in the configure dialog.
- Styles for the Button Component can be defined in the design dialog.
Version and Compatibility version-and-compatibility
The document describes v1 of the Button Component, which was introduced with release 2.5.0 of the Core Components in June 2019.
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 .
Technical Details technical-details
The latest technical documentation about the Button Component .
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
-
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 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
On the Accessibility tab, values can be set for labels for the component.
- Label - Value of an ARIA label attribute for the component
Design Dialog design-dialog
Styles Tab styles-tab
The Button Component supports the AEM Style System.
ÃÛ¶¹ÊÓƵ Client Data Layer data-layer
The Button Component supports the ÃÛ¶¹ÊÓƵ Client Data Layer.