Action of full-width button in ToolbarItem is not triggered

Question

1066 OP

Created 2d

Replies 2

Boosts 0

Participants 2

To make a toolbar button that has the maximum width, I proceed as shown below with iOS 26.

The appearance of the button is as expected, but its behavior is incorrect.

The action is not triggered when tapping within the button, but outside its text.

How to make the action triggered when tapping anywhere within the button ?

import SwiftUI


struct SampleView: View {
    
    var body: some View {
        
        NavigationStack {
            
            Text("")
            
                .toolbar {
                    
                    ToolbarItem(placement: .bottomBar) {
                        
                        Button(role: .confirm, action: self.action) {
                            
                            Text("Action")
                        }
                        
                        .frame(maxWidth: .infinity)
                    }
                }
        }
    }
    
    
    private func action() {
        
        print("Action Triggered !")
    }
}


#Preview {
    
    SampleView()
}

Answer 1

Frameworks Engineer OP

Apple

18h

A frame modifier on a view acts more like a picture frame around your view. It proposes a size to the child view, which decides its own size. In this case, frame(maxWidth: .infinity) increases the toolbar's glass background, and proposes that size to the Button, but Button sizes itself to tightly fit the button label.

To make the Button span the width of the toolbar item's glass background, you can try the buttonSizing(.flexible) modifier on the Button, or add .frame(maxWidth: .infinity) to the Text label of the button, so the label takes up the full width proposed to it.

Answer 2

1066 OP

8h

Using buttonSizing(.flexible) instead of .frame(maxWidth: .infinity) has no effect :
The button does not get full-width.

Applying .frame(maxWidth: .infinity) to the Text instead of the Button has no effect either :
The button does not get full-width.

The issue can be simply reproduced through the provided code example.

Notice that the button is required to be prominent (see role: .confirm in the code example).

Is there any workaround ?