Skip to main content
.offset(offset: { x?: number; y?: number }): Component
​
offset
object
required
The offset values in points.

​
Support

​
Usage

​
Shifting a component

Circle()
    .frame({ width: 50, height: 50 })
    .foregroundStyle(Color("blue"))
    .offset({ x: 20, y: -10 })

​
Overlapping badge

ZStack([
    Image({ systemName: "bell" })
        .font("title"),
    Circle()
        .frame({ width: 12, height: 12 })
        .foregroundStyle(Color("red"))
        .offset({ x: 10, y: -10 })
])

​
Vertical offset only

Text("Shifted down")
    .offset({ y: 20 })

​
Notes

  • The offset is purely visual. The component’s original layout space is preserved — surrounding components are not affected by the offset.
  • For layout-affecting position changes, use .padding() instead.

​
See Also