How to Correctly use .secondary Hierarchy in SwiftUI

Apply the styling

The Text view allows us to display strings in SwiftUI.

SwiftUI provides many modifiers to style it according to what we need and today we will focus on one style that can be applied.

The hierarchical style.

This property can be applied using the .foregroundStyle(_) modifier.

It has 5 levels: .primary, .secondary, .tertiary, .quaternary and .quinary.

VStack(alignment: .center) {
	Text("Primary")
		.foregroundStyle(.primary)
	Text("Secondary")
		.foregroundStyle(.secondary)
	Text("Tertiary")
		.foregroundStyle(.tertiary)
	Text("Quaternary")
		.foregroundStyle(.quaternary)
	Text("Quinary")
		.foregroundStyle(.quinary)
}
.foregroundStyle(.purple)

Here the .secondary style dims the foregroundColor applied to the VStack.

Compatibility

The hierarchical styles can dim every custom color, not only SwiftUI default ones.

And it works not only with Text but also with Shape, Button, Stacks, Image and Label.

Label

Label("Secondary", systemImage: "2.square.fill")
	.foregroundStyle(.secondary)

Shape

RoundedRectangle(cornerRadius: 15)
	.frame(width: 100, height: 30)
	.foregroundStyle(.secondary)

Image

Image(systemName: "2.square.fill")
	.foregroundStyle(.secondary)

Button

Button("Tap here!") {
	// Perform action
}
.foregroundStyle(.secondary)