Hi Kindly help me out for the below , i need to alligned the icon properly with the text next to it and make it red color ,,, kindly help me out for this.


<lightning-button-icon class='slds button'
  icon-name='utility:warning' variant='bare' ></lightning-button-icon>

below is the image enter image description here

kindly someone help me out for this. thanks

  • Do you want to display icon on the button? Sep 3, 2020 at 11:15
  • not required...i can display without button...buy size should be like that of text
    – Tina
    Sep 3, 2020 at 11:16

1 Answer 1


Put some top margin on the text Use slds-text-color_destructive to change the text color to red. And to align the items use slds-float_left with some padding.

To change icon color to red use icon-class="slds-text-color_destructive" on lightning-button-icon.

    <lightning-button-icon icon-class="slds-text-color_destructive" class='slds-float_left slds-var-p-top_xxx-small' icon-name='utility:warning' variant='bare'></lightning-button-icon>
    <div class="slds-float_left slds-var-p-top_xx-small slds-var-p-left_xx-small slds-text-color_destructive">Action</div>
  • thankyu so much ,,, but i need t change the icon as red color....can you suggest anythig for this
    – Tina
    Sep 3, 2020 at 12:05
  • @Tina check now Sep 3, 2020 at 12:32

You must log in to answer this question.

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