Skip to main content
Capsule(): Shape;
Capsule takes no parameters. It creates a rectangle with fully rounded ends (corner radius equals half the shorter dimension).

​
Methods

​
.fill(style)
(style: Style) => Shape
Fills the capsule interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the capsule outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.

​
Support

​
Usage

​
Basic capsule

Capsule()
    .fill(Color("blue"))
    .frame({ width: 200, height: 44 })

​
Stroked capsule

Capsule()
    .stroke(Color("gray"), 2)
    .frame({ width: 180, height: 40 })

​
Pill-shaped button background

Text("Get Started")
    .foregroundStyle(Color("white"))
    .padding({ horizontal: 24, vertical: 12 })
    .background(
        Capsule().fill(Color("blue"))
    )

​
Tag or badge

HStack({ spacing: 4 }, [
    Text("NEW")
        .font("caption2")
        .bold()
        .foregroundStyle(Color("white"))
        .padding({ horizontal: 8, vertical: 4 })
        .background(Capsule().fill(Color("red")))
])

​
Notes

  • When the frame is square, Capsule renders as a circle. Use Circle directly if a circle is always intended.
  • For a rounded rectangle with a specific corner radius, use RoundedRectangle instead.

​
See Also