Add Button with Image and Text in ToolbarItem SwiftUI

user_3239229 0
Viewed 697

I want button exactly as in Reminders app in iOS Below code note working, I also tried using label and system image name.

        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button(action: {}, label: {
                    HStack {
                        Image(systemName: "plus.circle.fill")
                        Text("New Reminder")
                    }
                })

            }
        }

enter image description here

enter image description here

swiftui swift ios
1 Answers

Create a custom label style

struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon.font(.headline)
            configuration.title.font(.footnote)
        }
    }
}

Then you can you use the custom style for your label

Button(action: {}, label: {
   Label("Home", systemImage: "house")
      .labelStyle(VerticalLabelStyle())
})

icon with title underneath

user_4484440
Related