SwiftUI: How to apply .clipShape to .hoverEffect?

Question

I'm using the .hoverEffect modifier. It adds an hover effect to my button when users have their mouse/trackpad pointer on it:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Hello world") {
            // Action…
        }
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .hoverEffect(.lift) // ← Hover effect
        .clipShape(Capsule())
    }
}

However, when I apply a clip shape to the button (eg RoundedRectangle or Capsule ), the view is clipped but the hover effect isn't.

How can I have a hover effect that matches the shape of the button?

Answer 1

Use .contentShape(Capsule()) to change the shape of the hover effect to match your clipShape . Note that this modifier also affects the hit testing area, which is probably desirable in most examples similar to your own.