TechnologiesSwiftUI

ToolbarLabelStyle struct

iOSmacOStvOSwatchOSvisionOSiOS 18.0+✓ renders

The label style of a toolbar.

How it works

ToolbarLabelStyle describes how the labels of toolbar items render — whether each item shows its title, its icon, or both. SwiftUI normally chooses a presentation for toolbar labels based on the platform, placement, and available space, but that automatic behavior isn't always what you want for a given bar. Reach for ToolbarLabelStyle when you need to override that choice and pin the labels in a toolbar to a consistent appearance, so a row of actions reads uniformly rather than mixing icon-only and titled buttons.

  1. Apply the style with toolbarLabelStyle(_:)

    You don't construct a ToolbarLabelStyle directly; you set one on a view hierarchy with the toolbarLabelStyle(_:) modifier, which takes a style value and applies it to every toolbar label below it. In the example the modifier is attached to the navigation content as .toolbarLabelStyle(.titleAndIcon), so both toolbar buttons adopt that presentation.

  2. Pick a presentation: .titleAndIcon, .iconOnly, .titleOnly, .automatic

    ToolbarLabelStyle exposes its presentations as static members you pass to the modifier. .titleAndIcon shows each label's text and symbol together, .iconOnly and .titleOnly keep just one, and .automatic defers to SwiftUI's default. The example chooses .titleAndIcon to guarantee the action labels surface their words, not just glyphs.

  3. Drive it from each item's Label

    The style governs how SwiftUI lays out a Label's title and systemImage once that label lands in a toolbar. Here Label("Add", systemImage: "plus") and Label("Share", systemImage: "square.and.arrow.up") each carry both pieces, so the chosen ToolbarLabelStyle has both a title and an icon to compose — a label with only one would still respect the style but render only what it has.

  4. Scope it to the toolbar's items

    Because the modifier flows down the environment, a single toolbarLabelStyle on a container restyles all the ToolbarItem labels inside the enclosing .toolbar { } at once. The ToolbarItem(placement: .primaryAction) and ToolbarItem(placement: .secondaryAction) buttons both inherit .titleAndIcon without being styled individually.

Try it — Change .toolbarLabelStyle(.titleAndIcon) to .toolbarLabelStyle(.iconOnly) and watch the "Add" and "Share" text drop away so only the plus and square.and.arrow.up symbols remain.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

ToolbarLabelStyle.swift
struct ToolbarLabelStyleDemo: View {
    var body: some View {
        NavigationStack {
            Text("Editing document")
                .padding()
                .navigationTitle("Notes")
                .toolbar {
                    ToolbarItem(placement: .primaryAction) {
                        Button {
                        } label: {
                            Label("Add", systemImage: "plus")
                        }
                    }
                    ToolbarItem(placement: .secondaryAction) {
                        Button {
                        } label: {
                            Label("Share", systemImage: "square.and.arrow.up")
                        }
                    }
                }
                .toolbarLabelStyle(.titleAndIcon)
        }
    }
}
Live preview
Editing document 9:41 Notes
Editing document 9:41 Notes
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →