Styling Icon Button

The Goal

Design a rounded Button suitable for editing records.

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

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

Last updated