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
ui:button – Not Look Like Standard Lightning Button 🙁

Solution/Workaround :

 Lightning Component [LightningBtn.cmp]:

  • 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]

  • 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]

  • 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. [Lightning Application]


ui:button style change in Lightning Button

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 🙂


  • Hola tengo un boton JavaScript, como puedo ponerlo en cun componente para que funcione en lightnign?
    codigo del boton.

    case “7. Apartado”:“{!URLFOR(“../apex/Aletc_Formato_UnidadCondominal”, “”)}?id={!Opportunity.Id}”);
    case “9. Elaboración Contrato”:“{!URLFOR(“../apex/Aletc_Formato_UnidadCondominal”, “”)}?id={!Opportunity.Id}”);

    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.”);

Leave a Reply