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 (e.g. 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.

Answer 2

In SwiftUI, the order of modifier can change the view's behaviour, if you want to solve this problem, make sure the .hoverEffect(:_) used after clipShape.

use the code below instead:

// declarations...
.clipShape(Capsule())
.hoverEffect(.lift)