Custom Button in Swift UI

In this small tutorial I want to show you how you can create really easily a custom button design for your SwiftUI projects.

If you haven’t already create a new XCode project and open ContentView. Alternatively you can also directly create your own view. Now, let’ start by removing the Text() element that is by default in the body. Then open up the UI element library (click on the little plus icon in the top right corner), search for button and drag a button into our view.

Each button has two parts:

• action: What is supposed to happen when the button is pressed?
• view: Content of the Button / How it looks

In this tutorial we want to specifically look at how we can customize the button and make it look more interesting.

The view can be as simple as a string or a Text view:

// Passing a String to display
Button("Button") {
    print("Button was pressed 😎")
}
// Using a Text()
Button(action: { print("Button was pressed 😎") }) {
    Text("Button")
}

Especially the second way of creating a Button is interesting for us, as we can replace the Text() with other UI elements and create a completely different look.

Final Design

Before we dive right into the code, let’s take a look at the button we are going to create and check what we need to do to achieve the new look.

Final Button with Icon and Gradient Background

• Icon beside text
• White text color and gradient background
• Width wider then text and padding around text
• Background with rounded corners

Instead of trying to achieve everything at once we are going to work on each point separately until we have the final design.

Icon beside Text

Adding an icon next to the next is really simple, first we embed the Text() in a HStack, and then we add an Image() before the Text(). If you would want to have the icon after the text, just add the Image() below the Text().

HStack {
    Image(systemName: "highlighter")
    Text("Button")
}

Note: Set the“systemName” to one of the icon names from the SF Symbols library. SF Symbols is a big library from Apple of more then 4000+ icons that we can use for free in our Apps. If you have never used SF Symbols before, check out my other tutorial: Using SF Symbols in SwiftUI.

Button with Text and Icon on the side

White Text & Gradient Background

To add a background to a view we can use the .background() function. We can either directly pass a color to it or even a gradient. The LinearGradient() takes three arguments: gradient, startPoint, and endPoint.

// Background with just a simple color
HStack { ... }.background(Color.purple)
// Background with Gradient
HStack { ... }
    .background(
        LinearGradient(
            gradient: Gradient(colors: [.pink, .purple]),
            startPoint: .leading, 
            endPoint: .trailing)
    )

The gradient is a list of two colors, but we could add more. They define the color flow while the startPoint and endPoint are setting the direction of the gradient.

The text is currently blue which doesn’t work very well with our gradient background. To fix this we can just add a .foregroundColor(.white) to the HStack, which will apply the color to all its children.

Button with white font and background gradient

HStack {
    Image(systemName: "highlighter")
    Text("Button")
}
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(colors: [.pink, .purple]), startPoint: .leading, endPoint: .trailing))

Width & Padding

The colors already look very much like we would like to have them but we need a little bit more space around the text.

First add a .padding() to the HStack. This will allow for some space between the Text and the edge of the background color.

Then add a .frame() and pass .infinity to it’s width argument. This will stretch the button from on side of the screen to the other. We probably want some extra space around the sides, between button and the end of the screen. To achieve this, add another .padding() but this time to all of the button.

Button(action: {...}) {                               
HStack { ... }
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(...))
    .frame(maxWidth: .infinity)    // NEW
    .padding()                    // NEW
}
.padding()                        // NEW

Rounded Corners

Last but not least we want some rounded corners on our button. Which is super easy and we just need to add .cornerRadius() to our HStack. As a argument we pass the radius of the radius.

HStack { ... }
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(...))
    .frame(maxWidth: .infinity)
    .padding()  
    .cornerRadius(40)      // NEW              
}

Final Button with Code

Final custom SwiftUI Button

Thank you for reading, I hope this was helpful! ❤️