How can you make the hover highlight rounded?

Question

samwarnick OP

Created Jun ’20

Replies 1

Boosts 0

Views 2.2k

Participants 1

I have the following toolbar button:

Code Block Button(action: {}, label: {
    Text("Button")
        .padding()
})
.hoverEffect()

When I hover the button with a mouse on iPad, a rectangle with square corners appears. I've tried using the cornerRadius and clipShape modifiers to make the corners rounded with no luck. Is there a way to accomplish this in SwiftUI? I would like it match the hover effect on the navigation bar back button.

Answered by samwarnick in 618325022

Looks like you can use the contentShape modifier.

Code Block swiftButton(action: {}) {
	Text("Button")
		.padding()
}
.contentShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
.hoverEffect()

Boost

Answer 1

samwarnick OP

Jul ’20

Accepted Answer

Looks like you can use the contentShape modifier.

Code Block swiftButton(action: {}) {
	Text("Button")
		.padding()
}
.contentShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
.hoverEffect()

2