Creating a Circular Button

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!
7 Likes

7 posts were split to a new topic: How do I create a responsive button?

I created a circular button according to your post and it worked. But I have a new problem. When I created the button, the alignment of the text of that button is always top. I want to align it center. Please help. Here is a screenshot.

not possible but use a column and inside it a label
try and tell

There is no problem in the instructions. I believe you replied without testing it yourself. The text seems top aligned only in the development screen. When you test the screen, the text is properly placed.

1 Like

i test on web only
i only use phone at times
:sweat_smile: