0

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:

enter image description here

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.

Improve this question

1 Answer 1

Reset to default
6

I believe you need this type of component

<lightning:buttonIcon iconName="utility:edit" variant="bare" onclick="{! c.handleEdit }" alternativeText="Edit" />

Btw, check out this awesome library of Salesforce Lightning components: https://developer.salesforce.com/docs/component-library/bundle/lightning:buttonIcon/example

Improve this answer

You must log in to answer this question.

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