Skip to main content
.overlay(content: Component): Component
.overlay(props: { alignment: Alignment }, content: Component): Component
​
content
Component
required
The component to layer on top.
​
props
object

​
Support

​
Usage

​
Basic overlay

Circle()
    .frame({ width: 100, height: 100 })
    .foregroundStyle(Color("blue"))
    .overlay(
        Text("A")
            .foregroundStyle(Color("white"))
            .font("title")
    )

​
Aligned overlay

Position the overlay at a specific corner or edge using the alignment parameter. 
Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .overlay(
        { alignment: "bottomTrailing" },
        Circle()
            .frame({ width: 24, height: 24 })
            .foregroundStyle(Color("red"))
            .overlay(
                Text("3")
                    .font("caption2")
                    .foregroundStyle(Color("white"))
            )
            .padding(8)
    )

​
Badge overlay

Image({ systemName: "bell.fill" })
    .font("title")
    .overlay(
        { alignment: "topTrailing" },
        Text("5")
            .font("caption2")
            .foregroundStyle(Color("white"))
            .padding(4)
            .background(Color("red"))
            .clipShape(Circle())
            .offset({ x: 6, y: -6 })
    )