Change ui:button Look Into Lightning Button: Workaround
Hi Guys,
Today i am came here with a workaround for a very common issue. when we create custom Salesforce lightning component we have using ‘ui:button’, and this ui:button component comes with some default CSS classes which is change it look and feel. and it’s not looks like standard lightning button.
These classes [uiButton–default and uiButton] will auto populate when ‘ui:button’ component will create HTML button element on DOM. If you will remove those standard classes from ui:button and use Lightning Theme Buttons Classes then it will be looks like standard lightning button.
Solution/Workaround :
Lightning Component [LightningBtn.cmp]:
<aura:component > <!--init handler which is call on component load --> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <div class="slds-m-around_large"> <!--UI buttons with Lightning Buttons Classes --> <!-- https://www.lightningdesignsystem.com/components/buttons/#content --> <ui:button class="slds-button_neutral" label="Click neutral" aura:id="btnNeutral"/> <ui:button class="slds-button_brand" label="Click brand" aura:id="btnBrand"/> <ui:button class="slds-button_success" label="Click success" aura:id="btnSuccess"/> <ui:button class="slds-button_destructive" label="Click destructive" aura:id="btnDest"/> </div> </aura:component>
- In the above lightning component we have 4 ui:button with Lightning Theme Button Classes and a unique aura:id.
- We also have a aura init handler which will call the doInit function on component load.
JavaScript Controller [LightningBtnController.js]
({ doInit : function(component,event,helper){ // On component load, use setTimeout() method which is execute after 100 milliseconds setTimeout(function(){ // call helper method with passing each ui:button aura Id helper.removeCls(component,'btnBrand'); helper.removeCls(component,'btnSuccess'); helper.removeCls(component,'btnDest'); helper.removeCls(component,'btnNeutral'); }, 100); }, })
- In above doInit function we are set a JavaScript time out method which is call after 100 milliseconds.
- In this time out method we will call helper function for each ui:button with passing each button aura:id.
JavaScript Helper [LightningBtnHelper.js]
({ removeCls : function(component,btnAuraId) { // get the ui:button component using aura:id var button = component.find(btnAuraId); // remove default ui:button style class $A.util.removeClass(button, "uiButton"); $A.util.removeClass(button, "uiButton--default"); } })
- In the above helper function we are first get the button element using aura:id and then we will remove the default classes from that button.
demo.app [Lightning Application]
<aura:application extends="force:slds"> <c:LightningBtn/> <!-- here c: is org. default namespace prefix--> </aura:application>
Output:
Related Resource :
Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.
if you have any suggestions or issue with it, you can post in comment box 🙂
2 comments
very useful post, keep it up
Hola tengo un boton JavaScript, como puedo ponerlo en cun componente para que funcione en lightnign?
codigo del boton.
switch(“{!Opportunity.StageName}”){
case “7. Apartado”:
window.open(“{!URLFOR(“../apex/Aletc_Formato_UnidadCondominal”, “”)}?id={!Opportunity.Id}”);
case “9. Elaboración Contrato”:
window.open(“{!URLFOR(“../apex/Aletc_Formato_UnidadCondominal”, “”)}?id={!Opportunity.Id}”);
break;
default:
alert(“No se puede generar contrato para esta Oportunidad con desarrollo {!Opportunity.Desarrollo__c} y etapa {!Opportunity.StageName}, Solo está disponible para la etapa 9. Elaboración Contrato.”);
break;
}