Power Apps Button Control [How to Use]

In this Microsoft Power Apps tutorial, we will learn everything about Power Apps Button Control and its key properties.

Also, we will discuss how to add and customize the Power Apps Button control in a Canvas app with various examples.

Also, Read: Power Apps Modern Button Control [Complete Guide]

Power Apps Button Control

Power Apps Button Control allows users to perform an action on its onclick. That indicates that when a user clicks the button, something will happen.

The below image represents the Power Apps button control:

Power Apps Button Control Properties

Let’s discuss the Key properties of Power Apps Button control in a Canvas app such as:

Property	Description
Text	We can change the name of the Button control in the Text property
DisplayMode	By default in Edit mode, if we want to change to Disable mode where we will not
DisabledColor	The distance between the Button control’s left & right edges
Color	By using the color property, we can define the text color, and background color and also change border thickness & color as well
BorderColor	Color of the Button control’s border
BorderStyle	Select the Border styles like Solid, Dashed, Dotted, or None
Font	we can also change the font, font size, and font style. And also we get other properties to Button control
Fill	To fill the Background color of a Button control
DisabledColor	Disabled the Color of text in the DisplayMode property of the Button control
HoverFill	Change the background color of the Button control
OnSelect	When the user clicks or taps the Button to perform the actions
Padding	We can add padding around the text of the Button
PressedColor	Change the Color of text, when the user Clicks or Taps the Button control
PressedFill	Change the Color of the Button control, when the user Clicks or Taps the Button control
Size	To change the size of the button by using drag & drop the button or change the width & height positions
Visible	Select the Visible slide option to show/hide the Button or change the Visible property.
Width	The distance between the Button control’s left & right widges
X	The distance between the left edge of the control and to left edge of its parent container
Y	The distance between the top edge of the control and to top edge of its parent container

See the below picture that explores key properties of the Power Apps Button control. Also, we can add more button properties from the top left corner.

This is all about Power Apps Button Control Properties.

Add Power Apps Button Control

Here, we will see how we can add a Power Apps Button Control in the Power Apps Canvas app.

• To add a Button in Power Apps, Go to + Insert -> Click the Button control.

• Once it will appear, we will Rename the Button control (btn-saved) and Change the Text property (“Click to View Text Box”) as shown below:

This is how to add a Power Apps Button Control in the Canvas app.

Check out: How to Show Hide Power Apps Label Control On Button Click

How to Use Power Apps Button Control

Let’s take a simple scenario that how we can work with Power Apps Button Control.

• The below image represents a Power Apps Button control (Click to View Text Box) and a Text input control.
• When a user will click on the button, then the text box will appear (right side) where you can enter any text. Again when the user will click on the button, then the text input control will disappear.

• To work around this, select the Button control and set its OnSelect property to the code below:

OnSelect = UpdateContext({showTextField: !showTextField})

Where,

showTextField = Context variable name

• Next, select the text input control and set its Visible property as:

Visible  = showTextField

ShowTextField is the context variable name.

Finally, Save, Publish, and Preview the app. Once you will click on the button control, the text input control will appear at the same time. When the user will click the button again, then the text input will disappear.

This is how to Use Power Apps Button Control.

Power Apps Button Control Customization

Now, we will see how to Customize a Power Apps Button Control in the Canvas app like:

1. Change the Power Apps Button appearance
2. Change Power Apps button color when hovering over it
3. How to disable the Power Apps Button control
4. Power Apps Button Control in View Mode

Change the Power Apps Button appearance

By default, we get Rectangular button control with rounded corners in a Canvas app. Instead of that, we can change the Button control shape by using the following properties like Height, Width, and Radius.

For suppose, we have to create a Button shape either a Square or Circle. For this follow the steps are:

• Insert the New button control to make a Square shape -> Go to the Properties pane, change the width and height property as the same size, and make it the Border radius value as below:

Width = 160
Height = 160
Border radius = 0

• Also, we will see how to make a Power Apps Button control in a Circle shape. Insert a New button, and make the width and height property as the same size. Also, make it Border radius value as below:

Width = 160
Height = 160
Border radius = 80

• We can also get Duplicate Power Apps button controls by using the original buttons. For this, we can just Copy (Ctrl+C) and Paste (Ctrl+V) the respective button controls like below:

This is how to change the Power Apps Button appearance in a Canvas app.

Have a look: Power Apps Modern Text input Control [All in Detail]

Change Power Apps button color when hovering over it

Let’s see how to change the button color when we hover over it. By default, the fill color of the button control will dim by 20%. But we can change it by using the HoverFill property like below:

HoverFill = ColorFade(RGBA(56, 96, 178, 1), 10%)

Also, we can change the complete color (BlueViolet) by using the PressedFill property like below:

PressedFill = BlueViolet

Follow the below picture that shows how we get another color when we hover over the Power Apps button control:

This is how to change a Power Apps button color when hovering over it in a Canvas app.

How to disable Power Apps Button Control

Here, we will see how to disable the Button control in the Canvas app. That means it will be clicked only once by the user. Let’s follow the below steps to disable the Button control such as:

• Click on the Button control (Click me). And set its OnSelect property to the code below:

OnSelect = UpdateContext({buttonDisplayMode:DisplayMode.Disabled})

Where,

buttonDisplayMode = Context variable name

• Next, go to the DisplayMode property and set the context variable as:

DisplayMode = buttonDisplayMode

buttonDisplayMode is the context variable name.

• When a user will tap on the Click me button, then the button will disable mode.

• Similarly, we can easily disable the Button control in the Canvas app without using any formula. Here, we can go to the Button control Properties pane -> Select Disabled under the Display mode property as shown below.

This is how to disable the Power Apps Button control in the Canvas app.

Power Apps Button Control in View Mode

Next, we will see how to only View the Button control in the Canvas app. That means a user can only view the Button control. They should not edit the button control. For that, we have to follow below steps are:

• Click on the Button control -> Go to the Property pane -> Select View mode in Display mode property.

• Instead of that, we can follow another way (With the DisplayMode Property) to View the Button Control in a Canvas app. Just follow the below steps are:
• Click on the Button control (Click me), and set its DisplayMode property to the code below:

DisplayMode = DisplayMode.View

This is how to view the Power apps Button control in a Canvas app.

Additionally, you may like some more Power Apps and SharePoint tutorials:

• Power Apps Modern Information Button Control
• How to Create a Canvas App in Power Apps
• How to Build a Parallel Approval in Power Automate
• How to Set Alerts in a SharePoint document library
• How to Filter Power Apps Gallery by Person

Conclusion

From this Microsoft Power Apps tutorial, we learned Power Apps Button Control and its key properties. And also covered how to add and customize the Power Apps Button control in a Canvas app like:

• Change the Power Apps Button appearance
• Change Power Apps button color when hovering over it
• How to disable the Power Apps Button control
• Power Apps Button Control in View Mode