Edit

Share via

Button control in Power Apps

  • Article

A control that the user can click or tap to interact with the app.

Description

Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

Key properties

OnSelect – Actions to perform when the user taps or clicks a control.

Text – Text that appears on a control or that the user types into a control.

Additional properties

Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Color – The color of text in a control.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Fill – The background color of a control.

Font – The name of the family of fonts in which text appears.

FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – The distance between a control's top and bottom edges.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – Whether the text in a control is italic.

PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – The distance between text in a control and the top edge of that control.

Pressed – True while a control is being pressed, false otherwise.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size – The font size of the text that appears on a control.

Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( ScreenName, ScreenTransitionValue )

Examples

Add a basic formula to a button

  1. Add a Text input control, and name it Source.

    Don't know how to add, name, and configure a control?

  2. Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)})

    Want more information about the UpdateContext function or other functions?

  3. Add a Label control, set its Text property in the formula bar to Value(Total), and then press F5.

  4. Clear the default text from Source, type a number in it, and then click or tap Add.

    The Label control shows the number that you typed.

  5. Clear the number from Source, type another number in it, and then click or tap Add.

    The Label control shows the sum of the two numbers that you typed.

  6. (optional) Repeat the previous step one or more times.

  7. To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Configure a button with multiple formulas

Add a formula that clears the Text input control between entries.

  1. Set the HintText property of Source to "Enter a number".

  2. Set the OnSelect property of Add to this formula:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Note

    Separate multiple formulas with a semi-colon “;”.

  3. Set the Default property of Source to ClearInput.

  4. Press F5, and then test the app by adding several numbers together.

Add another button to reset the total

Add a second button to clear the total between calculations.

  1. Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})

  2. Press F5, add several numbers together, and then click or tap Clear to reset the total.

Change a button's appearance

Change a button's shape

By default, Power Apps creates a rectangular Button control with rounded corners. You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

Note

Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. However, Icons and Shapes don’t have a Text property.

  1. Add a Button control, and set its Height and Width properties to 300 to make a large square button.

  2. Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Here are some examples of different shapes, each one starting from a 300 x 300 square button:

Change a button's color when you hover over it

By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

Note

The color value can be any CSS color definition, either a name or a hex value.

  • Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.

Accessibility guidelines

Color contrast

Screen reader support

  • Text must be present.

Keyboard support