Skip to main content
Capsule(): Shape;

​
Support

​
Usage

​
Basic capsule

Capsule()
    .fill(Color("blue"))
    .frame({ width: 100, height: 50 })

​
Capsule button style

Capsule()
    .fill(Color("blue"))
    .frame({ width: 120, height: 40 })
    .overlay(
        Text("Button")
            .foregroundStyle(Color("white"))
            .bold()
    )

​
Progress bar style

ZStack({ alignment: "leading" }, [
    Capsule()
        .fill(Color("gray").opacity(0.3))
        .frame({ width: 200, height: 8 }),
    Capsule()
        .fill(Color("green"))
        .frame({ width: 120, height: 8 })
])

​
Capsule with stroke

Capsule()
    .stroke({ style: Color("purple"), lineWidth: 3 })
    .frame({ width: 150, height: 60 })

​
Pill-shaped badge

Capsule()
    .fill(Color("orange"))
    .frame({ width: 50, height: 20 })    
    .overlay(
        Text("New")
            .font("caption")
            .foregroundStyle(Color("white"))
    )