Skip to main content
Rectangle(): Shape;
Rectangle takes no parameters. It creates a rectangle that fills its entire frame.

​
Methods

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

​
Support

​
Usage

​
Basic rectangle

Rectangle()
    .fill(Color("blue"))
    .frame({ width: 200, height: 100 })

​
Stroked rectangle

Rectangle()
    .stroke(Color("gray"), 1)
    .frame({ height: 1 })

​
As a background

Text("Hello")
    .padding(16)
    .background(
        Rectangle().fill(Color("yellow").opacity(0.3))
    )

​
Color swatch

HStack({ spacing: 4 }, [
    ForEach(["red", "orange", "yellow", "green", "blue"], (color) =>
        Rectangle()
            .fill(Color(color))
            .frame({ width: 32, height: 32 })
    )
])

​
Notes

​
See Also