Skip to main content
.background(style?: Style)
.background(content: Component)
.background(props: { alignment: Alignment }, content: Component)

​
Overload 1: Style background

​
style
Style
A Color, gradient, or Material to fill the background.

​
Overload 2: Component background

​
content
Component
required
A component to render behind this component.

​
Overload 3: Component background with alignment

​
props
object
required
​
content
Component
required
A component to render behind this component, positioned according to alignment.

​
Support

​
Usage

​
Color background

Text("Hello")
    .padding(16)
    .background(Color("blue"))

​
Gradient background

Text("Gradient")
    .padding(16)
    .background(LinearGradient({
        colors: ["purple", "blue"],
        startPoint: "leading",
        endPoint: "trailing"
    }))

​
Material background

Text("Frosted")
    .padding(16)
    .background(Material("thin"))

​
Component background

Text("Labeled")
    .padding(16)
    .background(
        RoundedRectangle(12)
            .foregroundStyle(Color("blue"))
    )

​
Component background with alignment

Text("Badge")
    .padding(16)
    .background(
        { alignment: "topTrailing" },
        Circle()
            .frame({ width: 12, height: 12 })
            .foregroundStyle(Color("red"))
    )

​
See Also