Button – Everything you want to know about modern control #3

Introduction to modern Button control

Buttons have been around in Power Apps ever since Power Apps came into existence. So although it isn't a new control, the modern button has a lot of differences (read: additions and some subtractions) when compared to the classic button control. I will explain both the additions (new properties) and subtractions (the classic button properties that have now been removed).

New Properties

1. Icon - The icon to show inside the button. For a long time, this was a request by the community to allow buttons to natively have icons. I was super happy when this property came out. You can pick from several different icons that are available in Power Apps.
2. Layout - There are 4 options:
   1. 'ButtonCanvas.Layout'.IconBefore
   2. 'ButtonCanvas.Layout'.IconAfter
   3. 'ButtonCanvas.Layout'.TextOnly

   4. 'ButtonCanvas.Layout'.IconOnly

      

3. IconRotation - A numeric value that controls the rotation of the icon (0, 90, 180, 270)
4. IconStyle - There are 2 options:
   1. 'ButtonCanvas.IconStyle'.Outline
   2. 'ButtonCanvas.IconStyle'.Filled

      

5. Appearance - There are 5 different options:
   1. 'ButtonCanvas.Appearance'.Primary - Used to define a primary action (default value) e.g. Save
   2. 'ButtonCanvas.Appearance'.Secondary - Used to define a secondary action e.g. Cancel
   3. 'ButtonCanvas.Appearance'.Outline - Used for a button with no background
   4. 'ButtonCanvas.Appearance'.Subtle - Used for a button with no background or border until the button is hovered or focused
   5. 'ButtonCanvas.Appearance'.Transparent - Used for buttons with no background or border

      

Using modern Button control

The only properties that modern controls have lost when compared to classic controls are the color related ones e.g. hover color, hover fill. Those are handled now by themes and to be honest, I would rather not worry about such properties.

One thing I would like to highlight here is how to set fill colors for modern buttons. Suppose you want to have a button with fill color as black. With classic controls, all you need to do is set the Fill property to Color.Black. If you set the BaseColorPaletteColor to Color.Black, the button doesn't look black.

To have a modern button with the exact fill color that you want, create a new theme as shown below (using black as an example):

Note: It is super critical to turn the "Lock primary color" toggle on. Then, when you apply this new theme to the modern button, this is how it will look:

Stay tuned for the remaining modern controls!

To read the official documentation of modern controls, click here.

Recent articles

1. Badge – Everything you want to know about modern control #2
2. Avatar – Everything you want to know about modern control #1
3. How to use custom sorting in canvas apps