How to darken a button when hovered?

[rocky meteor]

I'm creating a custom Button component like this:

":hover": {
    backgroundColor: theme.fn.darken(
      theme.colors[props.color || theme.primaryColor][6],
      0.1
    ),
  },

Is there an easier way? it seems hacky...

[real schooner]

Why is it hacky? This way all hover effects are added in Mantine

[rocky meteor]

Idk honestly. The way I setup this component seems like it could break to other variants (like outlines, gradients etc) 🤔 -- just for a sanity check, does it look like a good way to provide hover across the board then?

I just want to get the "current background color" and darken it a bit.

But I'm not sure how to get the current button background color without manually checking the color prop.

[real schooner]

Well, yeah, that is pretty much how hover styles are added, you can explore the source code to learn more – https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Button/Button.styles.ts#L101

[rocky meteor]

Oh wait, is there a standard way to enable hovering effect for the button then? Like enableHover prop?

https://mantine.dev/core/button/ -- I can't find any prop and it seems like there's no hover at all... The button is just static. If I rollback to version 3 in the docs the button has hover, but not the version 4 and 5

[real schooner]

There is no such prop, hover effects work correctly in documentation – https://mantine.dev/core/button/
Maybe you apply styles that override hover styles and make the button look the same as regular button while hovered

[rocky meteor]

hover effects work correctly in documentation --> not for me! 😮 -- I tested on chrome and firefox. Are you sure it's working for you?

(again, it works on version 3 for me)

Check how the class in the inspector with hover does not affect anything 🤔

(:active works though!)

[real schooner]

Well no idea about that, what OS do you have?

[rocky meteor]

Windows

Windows 11

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

[real schooner]

odd, was hoping for some 0.001% used linux distro 😄

[rocky meteor]

let me test on my macos

hold on

hahaha that's it

hover is broken since version 4 on win11? 😮

for my macos it works

[real schooner]

I've just checked on Windows 11, works correctly

[rocky meteor]

man, soooo weird...

I disabled all of my extensions

and tried Opera, Firefox and Chrome

Edge and Brave the same

I see these errors in the console when I open https://mantine.dev/core/button/

I'd be glad to jump on a call if you want to debug it, but it's super weird!

[real schooner]

The error on documentation website is not related to hover effects, maybe it is some property of your device that makes hover effects not work