Is it possible to remove the border on a lightning button icon when it clicked?

enter image description here

<lightning:buttonIcon iconName="utility:dislike" variant="bare" onclick="{!c.downVote}"  size="medium"" 
<lightning:buttonIcon iconName="utility:like" variant="bare" onclick="{!c.upVote}"  size="medium" " />
  • could you please share your sample code of component
    – Abhijith E
    Mar 23, 2020 at 21:54
  • 1
    That border is there to indicate active focus. This is an accessibility technology guideline. Are you sure you want to try and defeat this?
    – sfdcfox
    Mar 23, 2020 at 22:04
  • I think the blue color is enough for that no ?
    – Raphael D
    Mar 23, 2020 at 22:06

1 Answer 1


As sfdcfox already said That border is there to indicate active focus.....

but if you still want to remove it assign a class to button icon like this

<lightning:buttonIcon iconName="utility:like" variant="bare"  alternativeText="Settings" size="medium" class="test" />

then use that class to target during focus css

.THIS .test:focus{


if button icon is first element then



You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .