When a SwiftUI Divider is just a line

I had been using this little SwiftUI pattern whenever I wanted a thicker, colored line:

Divider()
    .frame(height: 2)
    .overlay(.red)

It worked on screen, but the code made me stop and decode it. Divider() says “separate these views.” The frame changes its size, and the overlay paints red over the resulting view. For a fixed red rule, that is more machinery than the idea needs.

When the line is the whole job

Today I learned that a Colorcan be a view in its own right. A Rectangleworks too:

Color.red
    .frame(height: 2)

Rectangle()
    .fill(.red)
    .frame(height: 2)

Both versions read like what I mean to draw. The parent still determines the available width; I can give the line an explicit width if I need one. For a custom accent rule with a fixed thickness, I would reach for Color.red first.

I initially thought of the overlay as an “iOS 13 way” to do this. That describes the feel of an old workaround, but it is not a version boundary: Divider, Color, and Rectangle all belong to SwiftUI's early vocabulary. The useful distinction is intent, not age.

When I actually want a divider

Then I read Jerry PM's deep dive into Divider . It reminded me that the built-in view has a job beyond drawing a stroke. Apple describes it as a visual separator that extends across a stack's minor axis: horizontal in a VStack, vertical in an HStack.

VStack {
    Text("Account")
    Divider()
    Text("Settings")
}

Here I am separating content, and I want SwiftUI to handle the line's orientation and default appearance in context. Replacing it with a red rectangle would make me responsible for those choices. It would also turn a system-colored separator into a hard-coded accent.

The article also credits Dividerwith accessibility and rendering benefits. Those are good things to check in a real screen, but I would not assume a custom line breaks accessibility or that an overlay is measurably slower without testing. The documented, practical difference is how the divider participates in layout.

Use Divider() to separate views. Use a color or shape when the line itself is the design.

My old overlay was doing both at once. That is why it felt clever, and why removing it made the result look wrong. Now I can choose the view that says what I mean.

Further reading: Apple's Divider documentation and Color documentation.