Skip to main content
.foregroundStyle(style: Style): Component;

​
Parameters

​
style
Style
required
The style to apply to the component’s foreground. This can be a color, gradient, or material.For text components, it affects the text color. For shapes, it affects the fill. For materials, it applies a backdrop filter effect.The Style type is a union of Color, Gradient, or Material.

​
Usage

​
Solid colors

Text("Blue text")
    .foregroundStyle(Color("blue"))

​
Gradients

Text("Gradient text")
    .foregroundStyle(LinearGradient({
        colors: ["red", "blue"]
    }))

​
Materials

Rectangle()
    .foregroundStyle(Material("ultraThin"))