Fun fact: this hover animation acts as a double-opt-in on mobile. A great trick to keep styles consistent but meet customers where they’re at 📱

What happens after you disconnect? You get only “connect” action without any hover interaction?

When you’re disconnected the default option to connect is what’s available.

Clever but inaccessible and bad ux. The user doesn’t know where the function is until they attempt to interact.

What’s your recommendation for improving?

Buttons shouldn’t be statuses unless toggles where treatment indicates state. This is acting as a toggle but actions are systemic triggers. Initial state should be a connect button. Active state should have a “connected” label but have a deprioritized “disconnect” button.

developer.apple.com/design/human-i… Covers this all and more

Buttons | Apple Developer Documentation

A button initiates an instantaneous action.

developer.apple.com

I love this, what would it look like without the colours?

This is an example of the default state in light mode. Everything in the app is various shades of grey, neutral, and black. We keep colors (green, red) for very important interactions (like reserving red for destructive actions) only.