Question 67708 in IOS Swift Question posted in
The official documentation can be found here.

Is there a SwiftUI version of the UIKit UIButton.ButtonType.close? – Ios swift

Right now, I am in the process of converting from UIKit to SwiftUI. In UIKit, there is a native Close, X-Styled Button – UIButton.ButtonType.close, like shown below:

enter image description here

I wanted to find the equivalent of this in SwiftUI, if built in to SwiftUI already. It is understandable if Apple hasn’t gotten around to building/converting this yet. I see this also in the Apple Maps App, which I believe is built in SwiftUI, like shown below (on the bottom right corner of the panel):

enter image description here

If there isn’t a built in button styling, how would one go about creating a View for this close button, which would adapt to light and dark mode? Thank you so much!

Edit: In UIKIt’s Storyboard Editor, here is what I am looking for:

enter image description here

Tags:

4

Answers


  1. 0

    SwiftUI does not use concept of "button type", instead you can construct it by yourself, like

    Button(action: {}) {
    Image(systemName: "xmark.circle.fill")   // << base !!
        .resizable()
        .frame(width: 32, height: 32) // << for demo
        .foregroundColor(.gray)
}

    *with any other modifiers as you wish

    demo

    Xcode 13.4 / iOS 15.5

    Login or Signup to reply.
  2. 0

    You can use the xmark.circle.fill symbol as the system image:

    XMARK

    ⚠️ Note: there is a difference between xmark.circle.fill and x.circle.fill

    Login or Signup to reply.
  3. 0

    You can embed a UIKit UIButton with UIViewRepresentable.

    struct CloseButton: UIViewRepresentable {
    private let action: () -> Void
    
    init(action: @escaping () -> Void) { self.action = action }
    
    func makeUIView(context: Context) -> UIButton {
        UIButton(type: .close, primaryAction: UIAction { _ in action() })
    }
    
    func updateUIView(_ uiView: UIButton, context: Context) {}
}

    and then

    CloseButton {
    // dismiss()
}

    Example:

    SomeView()
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            CloseButton {
                // dismiss()
            }
            .disabled(isBusy) // SwiftUI modifiers work fine.
        }
    }
    Login or Signup to reply.
  4. 0

    It is not currently possible to use system button types in SwiftUI including the close button. I’ve submitted FB10380135 to request this addition.

    In the meantime, you could make a Button look like the system close button. Mike Stern, an Apple Design Evangelist, noted in an Ask Apple Q&A:

    The modal close button uses the "xmark" SF Symbol at 15pt bold
    (regular size symbol, not large or small variant) and a 30×30pt
    circle. The hit area is likely bigger as we typically go for at target
    size that’s at least 44×44pt.

    Also note the close button doesn’t change size as the dynamic type size increases/decreases. Do be sure to make its accessibility label “close” and add support for the large content viewer so people using accessibility text sizes can tap and hold the button to reveal a large xmark symbol with the word Close underneath.

    I personally would recommend utilizing UIViewRepresentable to add a real close UIButton button though as opposed to trying to replicate it exactly – see the answer provided by MMP0.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search