Interactive previews iPhone
Color Variants
HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles
Platform Compatibility
iOS 15.0+ iPadOS 15.0+ macOS 12.0+ watchOS 8.0+ tvOS 15.0+ visionOS 1.0+
Tags
SwiftUI Code
VStack {
HStack {
smallRect
.foregroundStyle(.blue)
smallRect
.foregroundStyle(.blue.secondary)
smallRect
.foregroundStyle(.blue.tertiary)
smallRect
.foregroundStyle(.blue.quaternary)
smallRect
.foregroundStyle(.blue.quinary)
}
HStack {
smallRect
.foregroundStyle(.red)
smallRect
.foregroundStyle(.red.secondary)
smallRect
.foregroundStyle(.red.tertiary)
smallRect
.foregroundStyle(.red.quaternary)
smallRect
.foregroundStyle(.red.quinary)
}
HStack {
smallRect
.foregroundStyle(.orange)
smallRect
.foregroundStyle(.orange.secondary)
smallRect
.foregroundStyle(.orange.tertiary)
smallRect
.foregroundStyle(.orange.quaternary)
smallRect
.foregroundStyle(.orange.quinary)
}
// ...
}Found an issue or have a suggestion?
Created: May 29, 2025Updated: May 31, 2025
More Color Components
View all
UIKit Separator Colors
The UIKit separator colors that are also used in other components, such as the TextField
UIKit Content Background colors
The UIKit colors that are also used in other components like in List and GroupBox
UIKit Text Colors
The UIKit text colors that are also used in other components, such as the TextField
Explore Other Components
Browse all
Search Tab Role
On Liquid Glass, this tab is placed in its own group. In left-to-right (LTR) layouts, it will always appear on the right side of the TabView.
BorderedListStyle
The list style that describes the behavior and appearance of a list with standard border.
Store Cancellation Button
A type of button that people use to dismiss the current store presentation. It is displayed by default and only works in a sheet.
