Change button background color based on text

Question

Created Jan ’23

Replies 1

Boosts 1

Views 1.4k

Participants 2

Hello! i want to change the background color of the button according to the text. For example, i want the background color to be green if it's "online" or red if it's "offline". i hope i was able to explain, thank you in advance for any advice.

Boost

Answer 1

Claude31 OP

Jan ’23

You could do something like this:

You may have a State var:

@State private var buttonText = "online"  // You will change in code

Button(action: {
    if buttonText == "online" {
        buttonText = "offline"
    } else {
        buttonText = "online"
   }
}) {
    Text(buttonText)
          .frame(width: 140, height: 28, alignment: .center)
          .foregroundColor(Color.white)  // To keep text readable
          .background(buttonText == "online" ? .green : .red)
         .cornerRadius(12)
}

0