Button (v2)

Button component written in HTL.

Features

• Linkable to content pages, external URLs or page anchors.
• Allows an icon identifier to be configured for rendering an icon.
• Style System support.

Use Object

The Button component uses the com.adobe.cq.wcm.core.components.models.Button Sling model as its Use-object.

Edit Dialog Properties

The following properties are written to JCR for the Button component and are expected to be available as Resource properties:

1. ./jcr:title - defines the button text
2. ./link - defines the button link
3. ./linkTarget - defines if the link should be opened in a new browser tab
4. ./icon - defines an icon identifier for rendering an icon
5. ./accessibilityLabel - defines an accessibility label for the button
6. ./id - defines the component HTML ID attribute.

BEM Description

BLOCK cmp-button
    ELEMENT cmp-button__text
    ELEMENT cmp-button__icon
        MOD cmp-button__icon--<icon>

Icon styling

Icon styling must be done by users of the Core Components. Here's an example from the Core Components Library.

Information

• Vendor: Adobe
• Version: v2
• Compatibility: AEM 6.3
• Status: production-ready
• Documentation: https://www.adobe.com/go/aem_cmp_button_v2
• Component Library: https://www.adobe.com/go/aem_cmp_library_button
• Authors: Stefan Seifert, Vlad Bailescu, Jean-Christophe Kautzmann

If you were involved in the authoring of this component and are not credited above, please reach out to us on GitHub.