Toolbar button is clipped in iOS 26

Question

Created 14h

Replies 1

Boosts 0

Participants 2

When using a custom button style to generate the button label, it will be clipped. You can check below sample, the first one is render fine, but the second button with custom style will be clipped.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {}
                .toolbar {
                    ToolbarItem(placement: .topBarLeading) {
                        Button {
                            
                        } label: {
                            HStack {
                                Image(systemName: "chevron.backward")
                                Text("Back")
                            }
                        }
                    }
                    
                    ToolbarItem(placement: .topBarLeading) {
                        Button {
                            
                        } label: {
                            EmptyView()
                        }
                        .buttonStyle(MyButtonStyle())
                    }
                }
                .navigationTitle("Title")
        }
    }
}

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            Image(systemName: "chevron.backward")
            Text("Back")
        }
    }
}

Screenshot 2025-08-15 at 11.31.52.png

Boost

Answer 1

Claude31 OP

6h

Welcome to the forum.

You place both buttons as topBarLeading. Is it on purpose ? No issue if this second button is topBarTrailing

The same occurs if MyButtonStyle is first: it gets clipped.

Idem if MyButtonStyle is the only button:

Capture d’écran 2025-08-15 à 14.39.25.png

And if image is removed, Text is truncated with ellipsis…

But setting a frame width for the text (or even better, the HStack) solves the problem:

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            Image(systemName: "chevron.backward")
            Text("Back")
                .frame(width: 80)   // <<-- ADDED
        }
    }
}

Capture d’écran 2025-08-15 à 14.25.54.png

So looks like that without setting the frame, frame is considered zero (or very small), probably to optimise space ?

You could file a bug report.

0