function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
krishna casukhelakrishna casukhela 

Button text to show bold after button disable

<aura:attribute name="disableClick" type="Boolean"/>
<lightning:button variant="base" label="showMe" title="clickMe" disabled="{!v.disableClick}" onclick="{!c.handleClick}"
I am setting component.set("v.disableClick",true) based on some logic in the code.
so the button text becomes unreadable.
But I want the button text to be little bolder so that its at least readable 
Please let me know how to do this
mukesh guptamukesh gupta
Hi Krishna,

Please use below code:-

CSS Stylesheet: 
.THIS .button-title{
    font-weight: bold;
}

Component:
  
<lightning:button aura:id="changeIt" class = "button-title" variant="base" label="showMe" title="clickMe" disabled="{!v.disableClick}" onclick="{!c.handleClick}"

JS Controller:
  
({

    handleClick: function(cmp, event) {

	var myBtn = cmp.find("changeIt");
	$A.util.addClass(myBtn	, "button-title");
	}

})

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 
krishna casukhelakrishna casukhela
Hi Mukesh
Thanks for the reply
Initally on page Load the button is disabled. so the text is not much readable.
There is an lightning input field which has got an onchangle handler. 
<lightning:input label="someMe" onchange="{!c.handleChange}"  aura:id="someMe" value="{!myInput}"/>
when the text in lightning input changes the onchange handler is fired. so when the text changes only then I want the the button text to be a little bold.
Can you tell how to do this
mukesh guptamukesh gupta
Hi Krishna,

CSS Stylesheet: 
.THIS .button-title{
    font-weight: bold;
}

Component: 
<lightning:button aura:id="changeIt" class = "button-title" variant="base" label="showMe" title="clickMe" disabled="{!v.disableClick}" onclick="{!c.handleClick}"/>
<lightning:input label="someMe" onchange="{!c.handleChange}"  aura:id="someMe" value="{!myInput}"/>
JS Controller: 
({

    handleChange: function(cmp, event) {

	var myBtn = cmp.find("changeIt");
	$A.util.addClass(myBtn	, "button-title");
	}

})

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh