top of page

Power Apps Button Design Tips

Tips & Principles

  • Make buttons large enough to press

  • Buttons should be identifiable & indicate that they will trigger an action

  • Use expected button locations – check apps you use every day. This creates a sense of familiarity for your users

  • Stay consistent with your button designs and hierarchy

  • Don’t wrap text in your apps, should remain a single line


Types of Buttons


1. Contained Button (High Emphasis)

Font: Lato / Bold, Size 12

Size: Width: 104 Height: 36

Color: Fill Hex: AC1D8F, Border: N/A


2. Outlined Button (Medium Emphasis)

Font: Lato / Bold, Size 12

Size: Width: 104 Height: 36

Color: Fill: None, Border: Hex: AC1D8F



3. Text Button (Low Emphasis)

Font: Lato / Bold, Size 12, Color Hex: AC1D8F

Size: Width: 104 Height: 36

Color: Fill: None, Border: None



Sizing

Text in a button should have padding of 16 on the left & right, 12 on top & bottom. Easy way to accomplish is by setting your buttons properties to this:


Height: Button.Text + 24

Width: (Len(Button.Text)*12)+32


Button Drop Shadow

You can create drop shadows with the HTML text control or by importing a svg file, but here's a simple way to do it.


I use two layers, a back and front button. The front button is designed based on the contained button specs on the far left. The back button is 4px wider & 2px taller. Back button should be centered & topped align to the front button. The color fill is ColorValue(“#00000040”)

1,266 views

Comments


bottom of page