SwiftUI: How to apply .clipShape to .hoverEffect?

Viewed 466

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.

Button with a hover effect

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

1 Answers

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.

Related