Button Component Hover State Persistence on Mobile When Disabled

[philippeaka]

Summary

We have identified an issue with the Button component. On mobile devices the hover state classes are not consistently removed when the button is disabled. This creates an unintended visual effect, potentially confusing users about the button's functionality

Expected behavior

When the button is disabled, all hover state classes should be removed immediately, ensuring the button correctly reflects its disabled status without any hover state styling.

Actual behavior

This is the actual behavior on mobile devices

disabled-state.mov

Code :

  const [loading, setLoading] = useState(false);
  <Button
      disabled={loading}
      loading={loading}
      onClick={() => setLoading(!loading)}
      variant="primary"
    >
      Add product
  </Button>

Steps to reproduce

Link to sandbox : sandbox

1. Access the link on a mobile device
2. Click on the button

Are you using React components?

Yes

Polaris version number

No response

Browser

No response

Device

iPhone 15 Pro