How can I customize the appearance of PasteButton in SwiftUI?

gohnjanotis 0
Viewed 32

I have an app that allows the user to paste an image from the pasteboard, if it has an image on it. There is also an option for the user to choose a photo from the library. I had two buttons with a matching style, like this:

Matching buttons

struct ButtonView: View {
    var body: some View {
        VStack {
            Button {
                // Paste from pasteboard
            } label: {
                HStack {
                    Image(systemName: "doc.on.clipboard")
                    Text("Paste Photo")
                }
                    .font(.title)
            }
                .padding(.bottom, 8)

            Button
            {
                // Open photo library
            } label: {
                Image(systemName: "photo.on.rectangle.angled")
                Text("Pick a Photo")
            }
                .font(.title)
        }
    }
}

I'm trying to adopt the new PasteButton in iOS 16 to avoid the user prompt every time, but I can't find any documentation about how to customize it. In the WWDC 2022 session What's new in privacy, there is a section about the button and the speaker says "customize these buttons to fit with your app's interface," but I can't find any documentation about how to customize or what types of customization are allowed.

I have tried adding a .font(.title) modifier, for example, but that does not affect the text size. Ideally I'd like to change the button text to "Paste Photo" and get rid of the background, in addition to changing the font size, so that it matches how the app used to look with the custom button. How can I achieve this?

Buttons that don't match

struct ButtonView: View {
    
    private let supportedTypes: [UTType] =
        [UTType("public.image")!]
    
    var body: some View {
        VStack {
            PasteButton(supportedContentTypes: supportedTypes) { itemProviders in
                // Handle paste
            }
            .padding(.bottom, 8)

            Button
            {
                // Open photo library
            } label: {
                Image(systemName: "photo.on.rectangle.angled")
                Text("Pick a Photo")
            }
                .font(.title)
        }
    }
}
swiftui ios
1 Answers

From the Apple Document of PasteButton:-

The system provides a button appearance and label appropriate to the current environment. However, you can use view modifiers like buttonBorderShape(_:), labelStyle(_:), and tint(_:) to customize the button in some contexts.

PasteButton(supportedContentTypes: supportedTypes) { itemProviders in
    // Handle paste
}
.labelStyle(.iconOnly) // To show icon only or .titleOnly to show  title only
.tint(.red) // To change background color
.buttonBorderShape(.capsule) // To give capsule shape

So you cannot change the title of PasteButton but you can customize the button like above.

Note: You cannot clear the button background using .tint(.clear) this will make the background a little grey and I have also checked it doesn't even support custom LabelStyle.

Nirav D0
Related