Button

Button allows the display of a button or anchor button.

Github URL
Adobe URL
Source URL
Title
Standard
Content

Simple Button with only a text configured.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Button
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core/wcm/components/button/v1/button
Markup:
<div class="button">
  <button type="button" id="button-93a5672f17" class="cmp-button" data-cmp-clickable="" data-cmp-data-layer="{&quot;button-93a5672f17&quot;:{&quot;@type&quot;:&quot;core/wcm/components/button/v1/button&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:37:57Z&quot;,&quot;dc:title&quot;:&quot;Button&quot;}}">
    <span class="cmp-button__text">Button</span>
  </button>
</div>
JSON:
{"id":"button-93a5672f17","text":"Button",":type":"core\/wcm\/components\/button\/v1\/button","dataLayer":{"button-93a5672f17":{"@type":"core\/wcm\/components\/button\/v1\/button","repo:modifyDate":"2018-12-07T12:37:57Z","dc:title":"Button"}}}
PostCSS: CSS: Title
Linked
Content

Button linked to a page. Buttons with links provided are rendered as anchors.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Anchor Button
jcr:lastModifiedBy: admin
jcr:created:
link: /content/core-components-examples/library/page-authoring/button
jcr:lastModified:
sling:resourceType: core/wcm/components/button/v1/button
Markup:
<div class="button">
  <a id="button-6a037d80be" class="cmp-button" href="/content/core-components-examples/library/page-authoring/button.html" data-cmp-clickable="" data-cmp-data-layer="{&quot;button-6a037d80be&quot;:{&quot;@type&quot;:&quot;core/wcm/components/button/v1/button&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:38:48Z&quot;,&quot;dc:title&quot;:&quot;Anchor Button&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/button.html&quot;}}">
    <span class="cmp-button__text">Anchor Button</span>
  </a>
</div>
JSON:
{"id":"button-6a037d80be","text":"Anchor Button","link":"\/content\/core-components-examples\/library\/page-authoring\/button.html",":type":"core\/wcm\/components\/button\/v1\/button","dataLayer":{"button-6a037d80be":{"@type":"core\/wcm\/components\/button\/v1\/button","repo:modifyDate":"2018-12-07T12:38:48Z","dc:title":"Anchor Button","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/button.html"}}}
PostCSS: CSS: Title
Icon
Content

An icon identifier can be provided for rendering an icon in the button.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Contact Us
jcr:lastModifiedBy: admin
jcr:created:
icon: email
jcr:lastModified:
sling:resourceType: core/wcm/components/button/v1/button
Markup:
<div class="button">
  <button type="button" id="button-1d3ee49e15" class="cmp-button" data-cmp-clickable="" data-cmp-data-layer="{&quot;button-1d3ee49e15&quot;:{&quot;@type&quot;:&quot;core/wcm/components/button/v1/button&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:38:48Z&quot;,&quot;dc:title&quot;:&quot;Contact Us&quot;}}">
    <span class="cmp-button__icon cmp-button__icon--email"></span>
    <span class="cmp-button__text">Contact Us</span>
  </button>
</div>
JSON:
{"id":"button-1d3ee49e15","text":"Contact Us","icon":"email",":type":"core\/wcm\/components\/button\/v1\/button","dataLayer":{"button-1d3ee49e15":{"@type":"core\/wcm\/components\/button\/v1\/button","repo:modifyDate":"2018-12-07T12:38:48Z","dc:title":"Contact Us"}}}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *