Toolbar button is clipped in iOS 26

Question

Created 3w

Replies 4

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

XiayuLiu OP

3w

The preview is build by Xcode 26.0 beta 4

0

Answer 2

Claude31 OP

3w

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

Answer 3

XiayuLiu OP

2w

Adding two top leading buttons is just for compare. Even one button, layout is also messed. The difference between two buttons, one using label directly, the other using empty view but update label by custom button style. I can use fixedSize to make button looks good, but iOS 18 works fine without this modifier. So, I'm wondering if it's a bug for iOS 26.

0

Answer 4

Claude31 OP

2w

Looks like a custom style requires frame size.

Is it a feature or a bug, hard to say.

You should file a bug report (and note the FB reference here).

Don't forget to close the thread.

0