Disable hover effect

[Faetu]

Is there an easy way to disable the hover effect of buttons and navlinks etc.?

best regards

[yunchengyang515]

You can use styles api and css variable to make the hover background colour the same as button background colour

function Demo() {
  return (
    <Button
      styles={{
        root: {
          '--button-hover': 'var(--mantine-color-blue-filled)',
        },
      }}
    >
      Disabled Hover
    </Button>
  );
}