Adobe Experience Manager Sites & More

srikanth7792 · 8/29/21

I am trying to create a button in AEM page (custom page not aem admin console's), As a BE I wanted to leverage AEM coral-button component to get same look and feel. I have tried using clientlibs embed option like below. though I see coral js and css loading in page source. My button still looking without any css applied example blue color. any pointer would be helpfull.

embed="[coralui3,granite.ui.coral.foundation]"

Ravi_Pampana · 8/29/21

Hi,

Did your button html having all the required class matching OOtB html ? If css/js is loading but not applying then it should be because of html (classes/id) is not matching.

View solution in original post

Ravi_Pampana · 8/29/21

Hi,

Did your button html having all the required class matching OOtB html ? If css/js is loading but not applying then it should be because of html (classes/id) is not matching.

Kishore_Kumar_ · 8/29/21

Hi @srikanth7792 ,

Please refer this document to get details about where Coral UI can be used.

https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/touch-ui-conce...

Please check if below code helps. I have checked with sample button. It works

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='coralui3'}"/>
</sly>
<html>
<body>
	<button role="button" class="coral-Button coral-Button--primary">Test Button</button>
</body>
</html>

srikanth7792 · 8/30/21

Hello

Thanks for the reply. one question I have used below simple line as mentioned in the coral ui docs. Then this doesn't really working.in your code you hardcoded the coral classes. but as per the docs if we should apply below variant then it automatically work (eg: applying background color blue) any thoughts here.

      <button is="coral-button" class="coral-Form-field" variant="primary">Engage</button>

my html applies different classes like below.

<button is="coral-button" class="coral-Form-field _coral-Button _coral-Button--cta" variant="primary" size="M"><coral-button-label class="_coral-Button-label">Engage</coral-button-label></button>

Kishore_Kumar_ · 8/30/21

Hi @srikanth7792 ,

Not sure, In AEM, Coral UI might have been customized/extended as i could see some of the changes between two.

AEM

/libs/clientlibs/granite/coralui3/css/all.css
/libs/clientlibs/granite/coralui3/js/all.js

Coral UI

https://www.adobe.io/experience-manager/reference-materials/6-5/coral-ui/coralui3/css/coral.css
https://www.adobe.io/experience-manager/reference-materials/6-5/coral-ui/coralui3/js/coral.js

Vijayalakshmi_S · 8/30/21

Hi @srikanth7792,

In order for custom HTML attributes specific to Coral UI (like "is", "variant") to autogenerate the equivalent/respective coral classes and the same font type, try to use clientlib.all

First try in direct HTML, then we can narrow down the issue with embed (though you see both JS and CSS getting included)

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.all @ categories='coralui3'}"/>
</sly>

<button is="coral-button" class="coral-Form-field" variant="primary">Engage</button>

I tried in 6.5.0 and it works(both Clientlibs inclusion via HTML and as embed)

If it is still not working, please let know the AEM version you are working on.

Adobe Experience Manager Sites & More

Is it possible to use coral styles in aem custom page

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe