6

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

1
  • Any luck? I'm also trying to achieve this behaviour. Jan 28, 2021 at 20:55

3 Answers 3

1

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

1

This worked for me, the key thing was using .buttonstyle(.plain) and also embedding everything in a HStack with a Spacer() to push the button to the right.

Text and Icon button

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        HStack {
            Button(action: { }) {
                HStack {
                    Image(systemName: "plus.circle.fill")
                        .foregroundStyle(.blue)
                    Text("Add Event")
                        .font(.system(.body, design: .rounded).bold())
                        .foregroundColor(.blue)
                    }
                }
                Spacer()
            }
            .buttonStyle(.plain)
        }
0

Similar to ViktorEvil's solution, this worked for me. Primary difference is moving the Spacer() outside the button as when it was inside, it completely disappeared.

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        HStack {
            Button {
                // action code goes here
                print("Pressed button")
            } label: {
                HStack {
                    Image(systemName: "plus.circle.fill")
                        .foregroundStyle(.blue)
                    Text("New Reminder")
                        .font(.system(.body, design: .rounded).bold())
                        .foregroundColor(.blue)
                }
            }
            .buttonStyle(.plain)
            Spacer()
        }
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.