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.
To achieve this effect, you’ll need to change 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.
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.
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!
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!