Change ui:button Look Into Lightning Button: Workaround

Lightning Component

Sharing is caring!

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

  • 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.
demo.app [Lightning 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 🙂

Sharing is caring!

(Visited 1,085 times, 1 visits today)

One thought on “Change ui:button Look Into Lightning Button: Workaround

Leave a Reply