Skip to main content
.opacity(value: number): Component
​
value
number
required
The opacity level, from 0 (fully transparent) to 1 (fully opaque).

​
Support

​
Usage

​
Semi-transparent component

Text("50% opacity")
    .opacity(0.5)

​
Fading an image

Image({ url: "background.jpg" })
    .resizable()
    .scaledToFill()
    .opacity(0.3)

​
Animated fade

const body = () => {
    const [isVisible, setIsVisible] = useState(false)

    return VStack([
        Button("Toggle", () => setIsVisible(!isVisible)),
        Text("Fading content")
            .opacity(isVisible ? 1 : 0)
    ])
}

​
Disabled appearance

VStack([
    Button("Submit", () => {}),
    Text("Please fill in all fields")
])
    .opacity(0.4)
    .disabled(true)

​
Notes

  • Unlike .hidden(), a component with .opacity(0) still occupies layout space and remains hittable (responds to tap gestures). Use .allowsHitTesting(false) in combination with .opacity(0) to make it non-interactive.
  • Opacity applies to the entire component subtree, including all children.

​
See Also

  • hidden — hides a component and removes it from hit testing
  • grayscale — desaturates the component
  • brightness — adjusts brightness