ToolbarItem(placement: .navigationBarTrailing) positions icon to trailing edge of parent view

Question

I have installed a button in the navigation bar. I have positioned it on the trailing edge. I am using an image to populate the button's label. The label appears right alignment. How can I centre this?

ToolbarItem(placement: .navigationBarTrailing) {
    Button {
        // action
    } label: {
        Image(systemName: "keyboard")
    }
    .border(.red, width: 1)
}

Answer 1

This is how default button style works. It can be turned off by using plain style and then you can design it as you want (in-place or wrap into own style)

Tested with Xcode 13.3 / iOS 15.4

ToolbarItem(placement: .navigationBarTrailing) {
    Button {
        // action
    } label: {
        Image(systemName: "keyboard")
            .foregroundColor(.blue).padding(4)     // << here !!
    }
    .buttonStyle(PlainButtonStyle()) // turn off design, only behavior 
    .border(.red, width: 1)
}