How to set custom highlighted state of SwiftUI Button

Question

I have a Button. I want to set custom background color for highlighted state. How can I do it in SwiftUI?

Button(action: signIn) {
    Text("Sign In")
}
.padding(.all)
.background(Color.red)
.cornerRadius(16)
.foregroundColor(.white)
.font(Font.body.bold())

Verticillaster

Answer 1

Updated for SwiftUI beta 5

SwiftUI does actually expose an API for this: ButtonStyle.

struct MyButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
      .padding()
      .foregroundColor(.white)
      .background(configuration.isPressed ? Color.red : Color.blue)
      .cornerRadius(8.0)
  }

}


// To use it
Button(action: {}) {
  Text("Hello World")
}
.buttonStyle(MyButtonStyle())

Dairy

I'm getting this: dyld: Symbol not found: _$s7SwiftUI11ButtonStyleP4body13configuration9isPressed4BodyQzAA0C0VyAA0cD5LabelVG_SbtFTq – Oporto

This doesn't configure the label of the Button rather than the Button itself? The behaviour I'm seeing is suggestive of configuration.label affecting a subview, say if one was to set a corner radius in the style but a background on the Button following the .buttonStyle(...) call – Inelastic

Is there any to way to make custom disabled style? The one that is applied with .disabled(true)? – Pratte

@PavelAlexeev See https://mcmap.net/q/131391/-swiftui-buttonstyle-how-to-check-if-button-is-disabled-or-enabled for a solution to your problem. – Neoprene

This is only for pressed state not selected, which is just a momentary state: "A Boolean that indicates whether the user is currently pressing the button." developer.apple.com/documentation/swiftui/… – Ofilia

Answer 2

As far as I can tell, theres no officially supported way to do this as of yet. Here is a little workaround that you can use. This produces the same behavior as in UIKit where tapping a button and dragging your finger off of it will keep the button highlighted.

struct HoverButton<Label: View>: View {
    
    private let action: () -> ()
    
    private let label: () -> Label
    
    init(action: @escaping () -> (), label: @escaping () -> Label) {
        self.action = action
        self.label = label
    }
    
    @State private var pressed: Bool = false
    
    var body: some View {
        Button(action: action) {
            label()
                .foregroundColor(pressed ? .red : .blue)
                .gesture(DragGesture(minimumDistance: 0.0)
                    .onChanged { _ in self.pressed = true }
                    .onEnded { _ in self.pressed = false })
        }    
    }
}

Layman

Nice find! It can also be accomplished using .longPressAction(minimumDuration: 0, maximumDistance: .infinity, {}) { pressed in self.pressed = pressed } }. – Accouplement

however, this doesn't animate, does it? :hmm: – Uphemia

@Uphemia Use withAnimation{}. – Stratagem

Does this work if the button is somewhere within a scroll view? – Selfseeker

no it does not @DavidAnderson I switched back to the normal Button because of this – Insincere

Answer 3

I was looking for a similar functionality and I did it in the following way.

I created a special View struct returning a Button in the style I need, in this struct I added a State property selected. I have a variable named 'table' which is an Int since my buttons a round buttons with numbers on it

struct TableButton: View {
    @State private var selected = false

    var table: Int

    var body: some View {
        Button("\(table)") {
            self.selected.toggle()
        }
        .frame(width: 50, height: 50)
        .background(selected ? Color.blue : Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
    }
}

Then I use in my content View the code

HStack(spacing: 10) {
  ForEach((1...6), id: \.self) { table in
    TableButton(table: table)
  }
}

This creates an horizontal stack with 6 buttons which color blue when selected and red when deselected.

I am not a experienced developer but just tried all possible ways until I found that this is working for me, hopefully it is useful for others as well.

Carrew

Answer 4

This is for the people who are not satisfied with the above solutions, as they raise other problems such as overlapping gestures(for example, it's quite hard to use this solution in scrollview now). Another crutch is to create a custom button style like this

struct CustomButtonStyle<Content>: ButtonStyle where Content: View {
    
    var change: (Bool) -> Content
    
    func makeBody(configuration: Self.Configuration) -> some View {
        return change(configuration.isPressed)
    }
}

So, we should just transfer the closure which will return the state of the button and create the button based on this parameter. It will be used like this:

struct CustomButton<Content>: View where Content: View {
    var content:  Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    var body: some View {
        Button(action: { }, label: {
            EmptyView()
        })
            .buttonStyle(CustomButtonStyle(change: { bool in
                Text("\(bool ? "yo" : "yo2")")
            }))
   }
} 

Achates

Could you please show an example of using CustomButton? – Jacobsen

Answer 5

You need to define a custom style that can be used to provide the two backgrounds for normal and highlighted states:

Button(action: {
     print("action")
}, label: {
     Text("My Button").padding()
})
.buttonStyle(HighlightableButtonStyle(normal: { Color.red },
                                      highlighted: { Color.green }))

// Custom button style
@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
struct HighlightableButtonStyle<N, H>: ButtonStyle where N: View, H: View {
    
    private let alignment: Alignment
    private let normal: () -> N
    private let highlighted: () -> H
    
    init(alignment: Alignment = .center, @ViewBuilder normal: @escaping () -> N, @ViewBuilder highlighted: @escaping () -> H) {
        self.alignment = alignment
        self.normal = normal
        self.highlighted = highlighted
    }
    
    func makeBody(configuration: Configuration) -> some View {
        return ZStack {
            if configuration.isPressed {
                configuration.label.background(alignment: alignment, content: highlighted)
            }
            else {
                configuration.label.background(alignment: alignment, content: normal)
            }
        }
    }
}

Lilian

Answer 6

Okey let me clear everything again. Here is the exact solution

1. Create the below button modifier.

    struct StateableButton<Content>: ButtonStyle where Content: View {
        var change: (Bool) -> Content
        
        func makeBody(configuration: Configuration) -> some View {
            return change(configuration.isPressed)
        }
    }

2. Then use it like below one

    Button(action: {
        print("Do something")
    }, label: {

        // Don't create your button view in here
        EmptyView()
    })
    .buttonStyle(StateableButton(change: { state in

        // Create your button view in here
        return HStack {
            Image(systemName: "clock.arrow.circlepath")
            Text(item)
            Spacer()
            Image(systemName: "arrow.up.backward")
        }
        .padding(.horizontal)
        .frame(height: 50)
        .background(state ? Color.black : Color.clear)
        
    }))

Jam

Answer 7

The cleanest solution is going to use the ButtonStyle's configuration.isPressed property, but keep all the rendering logic in the default location for a button. Since it seems like ButtonStyle is a level above the label, I assumed you could use the Environment for this. In my testing though, I wasn't able to get it to work.

I was however able to get it to work via preference keys:

struct IsPressedButtonStyleExample: View {
  @State private var isPressed: Bool = false

  var body: some View {
    Button(action: {}, label: {
      Text("Button")
        .foregroundColor(isPressed ? Color.red : Color.blue )
    })
    .buttonStyle(IsPressedButtonStyle())
    .onPreferenceChange(IsPressedButtonStyleKey.self) { isPressed = $0 }
  }
}

struct IsPressedButtonStyle_Previews: PreviewProvider {
  static var previews: some View {
    IsPressedButtonStyleExample()
  }
}

struct IsPressedButtonStyle: ButtonStyle {
  func makeBody(configuration: Configuration) -> some View {
    configuration.label
      .preference(key: IsPressedButtonStyleKey.self, value: configuration.isPressed)
  }
}

struct IsPressedButtonStyleKey: PreferenceKey {
  static var defaultValue: Bool = false

  static func reduce(value: inout Bool, nextValue: () -> Bool) {
    value = nextValue()
  }
}

Ume

As convoluted as this answer is (if only you could pass a bindinging into the buttonstyle that would actually get set/used correctly [I tried]) it is the only solution that really works. The DragGesture hack causes scrolling issues. LongPressGesture seems to only work on press and not release. The others require you to put your UI inside the button modifier (not very portable/ideal.) – Ingrained