When SwiftUI automatically applies the glass look and when it doesn’t

Since iOS 18, buttons, toolbars, and other controls can appear in Apple's new glass button style. What's interesting is that SwiftUI sometimes applies this effect automatically, depending on where a view is placed. In this article, we'll look at when that happens, when it doesn't.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

Automatic glass style in toolbars

The most visible case of automatic glass styling happens in toolbars. When we use system placements like .confirmationAction, .cancellationAction, or .automatic, SwiftUI automatically applies the new .glass style to buttons placed there.

.toolbar {
    ToolbarItem(placement: .confirmationAction) {
        Button("Save", action: save)
    }
    ToolbarItem(placement: .cancellationAction) {
        Button("Cancel", action: cancel)
    }
}

Even though we never set .buttonStyle(.glass), both buttons adopt the glass appearance.

At the moment, there’s no official way to opt out. Applying .buttonStyle(.plain) or changing the layout does not remove the glass styling.

When glass doesn't appear in toolbars

The only remaining place in toolbars where the automatic glass style does not apply is the .principal placement. This slot is meant for titles or custom content and keeps its regular appearance, even if it contains buttons:

.toolbar {
    ToolbarItem(placement: .principal) {
        HStack {
            Text("Title Text")
            Image(systemName: "leaf")
            Button("Action", action: {})
        }
    }
}

Buttons outside toolbars

Outside toolbars, buttons do not get the glass style automatically. A standard Button in a normal view does not adopt any automatic glass styling, we have to apply it ourselves if we want the look:

VStack(spacing: 20) {
    Button("Add", action: add)
    Button("Glass Add", action: add)
        .buttonStyle(.glass)
}