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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.