Creating a Circular Button


#1

Buttons, by default, are rectangular but with just a few minor adjustments you can transform them into circles to completely change the look and feel of your app.

Properties

To achieve this effect, you’ll need to change the width, the height and, most importantly the borderRadius of your button. It’s worth pointing out that several other components such as the label and the TextInput also have a border radius property.

Squares

Start by setting the width and the height to the same value. In this example I’m using 250 x 250 px, but you can use any width and height you like, so long as they’re the same.
1_square

Rounded Corners

The next thing to do is to round the corners of our square button by giving the borderRadius a value, like 30. Look what happens to the button.

2_rounded

How can a Square have a radius?

You’re right - radii are for circles! When you round the corners like this it’s a bit like having four imaginary circles right up against the four corners of the square. The bits “outside” the circles just get chopped off. The radius we’re talking about is half the diameter of this circle.

3_arc

What if diameter = width = height?

Remember that we started with a 250 x 250 square. Well, what if we use a border radius that is half the width (or height!) of our square? We end up with a circle!
4_circular

Summary

To create a circular button:

  1. Start with a square button
  2. Set the borderRadius to be half the side length of the square and voilá! You’ve got a circular button!