[SalesForce] SLDS Button refreshing entire page on click in LWC

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