I am trying to make a bottom toolbar with a Text clickable but it doesn't work.

I tried doing this:

ToolbarItem(placement: .bottomBar) {
    Button(action: {
        print("toolbar tapped!")
    }) {
        HStack {
            Spacer()
            Text("Toolbar")
            Spacer()
        }
    }
}   

But content in bottom bar completely disappears

I am trying to make a bottom toolbar with a Text clickable but it doesn't work.

I tried doing this:

ToolbarItem(placement: .bottomBar) {
    Button(action: {
        print("toolbar tapped!")
    }) {
        HStack {
            Spacer()
            Text("Toolbar")
            Spacer()
        }
    }
}   

But content in bottom bar completely disappears

• ios
• swift
• swiftui

• Remove both Spacer() and ensure the ToolbarItem is encapsulated with a .toolbar {}. From the docs "in iOS, iPadOS, and tvOS, the system places items in the trailing position of the navigation bar." That means there isn't a lot of room to spread things out so my guess is that Spacer() is pushing it outside of the viewable areas – Jay Commented Jan 18 at 14:46
• Yeah, it makes sense. That's why the text isn't visible after Spacers. Thank you – Demetre Panjakidze Commented Jan 20 at 3:57

1 Answer 1

If you use button style .borderless then you can widen the button by applying .frame(maxWidth: .infinity) to the label:

ToolbarItem(placement: .bottomBar) {
    Button {
        print("toolbar tapped!")
    } label: {
        Text("Toolbar")
            .padding(.vertical)
            .frame(maxWidth: .infinity)
            .background(.yellow)
            .contentShape(Rectangle())
    }
    .buttonStyle(.borderless)
}

If you comment out the yellow background, the button can still be tapped across the full width of the toolbar. This is due to the modifier .contentShape. So this modifier is important if the button has no background.

You can also use a custom ButtonStyle to encapsulate the styling:

struct ToolbarButton: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundStyle(.link)
            .padding(.vertical)
            .frame(maxWidth: .infinity)
            .background(.yellow)
            .opacity(configuration.isPressed ? 0.2 : 1)
            .contentShape(Rectangle())
    }
}

Example use:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("Toolbar example")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button("Toolbar") {
                            print("toolbar tapped!")
                        }
                        .buttonStyle(ToolbarButton())
                    }
                }
        }
    }
}