Make a circular button in SwiftUI

Did you ever try to make a button with a circle shape in SwiftUI? Well, it is possible to create a circular button. In SwiftUI, there is clipShape() modifier that can do this job quite easily. This modifier is used to provide a specific shape to a view. In our case, we will give our button view a circular shape.

In the clipShape() modifier, we have to provide the shape. In our case, it will be a circle. With example, you can understand it in a better way.

Now let’s see how this can be done…

Below is given an example of using the clipShape() modifier to make a circular button in SwiftUI:

        Button(action: {
              print("Circular Button tapped")
            }) {
            Text("Tap me")
                .frame(width: 130, height: 130)
                .foregroundColor(Color.white)
                .background(Color.green)
                .clipShape(Circle())
        }

That’s it… The above code will create a circle-shaped button. Below is what it looks like:

As you can see, we have just drawn a circle using the SwiftUI Circle() inside the clipShape: clipShape(Circle())

In the above example, you can notice that we set the frame width and height. Now let’s see another example below without the frame() modifier and using padding() modifier:

        Button(action: {
              print("Circular Button tapped")
            }) {
              Text("Press")
            }
            .padding()
            .background(.green)
            .foregroundColor(.white)
            .clipShape(Circle())
        

This time, the button is like given below:

We did it…

By Faruque Ahamed Mollick