Change ui:button Look Into Lightning Button: Workaround

Lightning Component

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.

ui:button style change in Lightning Button sfdcmonkey.com
ui:button – Not Look 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:

ui:button style change in Lightning Button sfdcmonkey.com

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

  • 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;
    }

Leave a Reply