I am just after a simple button icon to indicate a warning. I need it to pop up a tooltip on click of the errors.

So I found <lightning-button-icon> which was just about what I needed. The issue, though, is that I can't change the color due to new CSS rules with LWCs. I need to to be a red color for error. (this honestly surprises me that they still haven't added a color parameter to their various button components and instead force you to use their default gray...).

So then I moved onto a button that will just use slds:

<button class="warning-button slds-button slds-button_icon" onclick={warningButtonClick}>
    <svg class={buttonSizeClass} aria-hidden="true" style={buttonColorStyle}>
        <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#warning"></use>

Cool, my button now looks exactly like the lightning-button-icon AND I get the color I want. Of course that couldn't just be the end of it... On click, it refreshes my entire Visualforce page...

How do you stop/prevent this refresh from happening?

This is a button that is an LWC that is inside an LWC, that is then inside a Visualforce page (hosted in a lightning component so it can be on a Visualforce page).

  • kinda hard to tell without seeing what your lwc does and how it interacts with the VF page
    – glls
    May 14 '19 at 14:59
  • It doesn't interact. It's just there. It is an old VF page so kind of stuck with it for now, I just want an LWC on it so it has to be in an aura component. And the LWC is doing nothing but displaying a button. And I want my onclick to happen when it is clicked, not refresh the page. May 14 '19 at 15:30

SO the button tag needs a type tag type="button" or else it will just submit the entire page which is its default behaviour.

  • 1
    Ah yes, this worked, thanks!. Nice easy fix. May 14 '19 at 21:55

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.