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.
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.
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.
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!
Summary
To create a circular button:
- Start with a square button
- Set the
borderRadiusto be half the side length of the square and voilá! You’ve got a circular button!