If using disabled variant it will not prevent onClick from firing

Bug report

Describe the bug

When you use the disabled variant on a button, the onClick will fire. If you don’t add this variant, it will prevent the onClick from firing as expected.

const ButtonDisabledVariant = styled("button", {
  variants: {
    disabled: {
      true: {
        opacity: 0.5
      }
    }
  }
});

To Reproduce

This example has two buttons, one with the disabled variant and one without to illustrate: https://codesandbox.io/s/gallant-sky-up4h1s

Expected behavior

I expect the onClick handler to not fire when when it’s disabled even when I’m adding disabled as a variant.

System information

• OS: macOS
• Browser: Firefox, Safari, Chrome
• Version of Stitches: 1.2.7
• Version of Node.js: 16.8.0

Additional context

I suspect this might happen because the disabled part of the button will be completely replaced with stitches own implementation?

[emdowu]

just use

pointerEvents: none

on disabled props

[paul-sachs]

Another possibility is to use something like:

const ButtonDisabledVariant = styled("button", {
  "&[disabled]": {
    opacity: 0.5
  }
});