0

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>
    </svg>
</button>

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).

Improve this question
2
  • kinda hard to tell without seeing what your lwc does and how it interacts with the VF page
    – glls
    May 14, 2019 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.
    – Tyler Dahle
    May 14, 2019 at 15:30

1 Answer 1

Reset to default
2

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

Improve this answer
1
  • 1
    Ah yes, this worked, thanks!. Nice easy fix.
    – Tyler Dahle
    May 14, 2019 at 21:55

You must log in to answer this question.

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