I have a lightning component in which I have built a data table. In this data table I have a component for each row. Everything works fine except one cosmetic thing. The inline edit button shows an ugly border which also takes up a lot space.
I am using lightning:button with lightning:icon and it looks like this:
Code:
<lightning:button onclick="{!c.editPicklist}" aura:id="Responsible" class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Responsible">
<lightning:icon iconName="utility:edit" size="xx-small" alternativeText="edit"/>
<span class="slds-assistive-text">Edit Responsible</span>
So my question is, how can get rid of the border and only show the icon?
I can do this with the button element. However I need to utilize aura:id which doesn't work withe that element.