Skip to main content
.contentShape(shape: Shape)
​
shape
Shape
required
The shape that defines the tappable area. Common shapes include Circle(), Capsule(), RoundedRectangle(cornerRadius), and Rectangle().

​
Support

​
Usage

​
Make the entire row tappable

HStack([
    Image({ systemName: "star" }),
    Text("Favorite"),
    Spacer()
])
    .contentShape(Rectangle())
    .onTapGesture(() => toggleFavorite())

​
Circular tap target

VStack([
    Image({ systemName: "play.fill" }),
    Text("Play")
])
    .frame({ width: 80, height: 80 })
    .contentShape(Circle())
    .onTapGesture(() => play())

​
Notes

By default, only areas with visible content respond to taps. contentShape expands (or restricts) the tappable region to the specified shape. Unlike clipShape, this does not clip the visual content.

​
See Also