Styling Icon Button

The Goal

Design a rounded Button suitable for editing records.

Designed Rounded Button

The Description

Any type of Buttons used for editing records must be slightly visible and contain an “easy-to-read” small icons.

The Knowledge You Will Get

1. How to design icons.

The Project Structure

View[MainView]

• MainView

  • Container[container1]

    • Button[button1]

1. Prepare a Canvas and Design a Button

1. Place in a Container, set up its Item Flex -> Stretch; Horizontal Alignment -> Center; Vertical Alignment -> Middle

2. Put in a new Button and configure its settings as follows:

   1. Empty its default Text -> Value -> ""

   2. Icon -> Name "mdi/lead-pencil"; Size -> Small

   3. Style -> Button Style -> Custom

      1. Background -> WHITE; Foreground -> TEXT; Border Color -> LIGHT_GRAY; Border Width -> 1px; Border Radius -> 18px

The Conclusion

As we can see, styling buttons is fast and easy. Try to make your style.

Follow up on our Icon Button tutorial https://youtu.be/qeCDpKsg7Xc