Skip to content
PowerLibs LogoPowerLibs

Button Components for Power Apps

The Buttons family covers the single buttons you put under a form or in a header, plus the Split Button with its menu and the Action Bar along the bottom of an edit screen. Every button comes in three sizes (32, 40, 48), follows your brand color, and is as wide as its text unless you set a width. A plain text button is a real Classic or modern Button; a button with an icon is a small container with the icon, a label and a transparent button on top. The Button Group is its own family. Primary Button and Outline Button are free; the others need a Components, Ultra, Team or Lifetime plan.

Pick a variant

ComponentPlanYAMLWhat it is forSettings you can change
Primary ButtonFreeClassic, ModernThe one action a screen is aboutText, Icon and side, Size, Width, Color
Icon ButtonPaidClassic, ModernToolbars and the Add button above a gallery; icon only for known actionsText (the tooltip when icon only), Icon and side, Icon only, Style (filled, outline, ghost), Size, Width, Color
Danger ButtonPaidClassic, ModernDelete, remove, cancel the orderText, Style (filled or outlined red), Icon, Size, Width
Ghost ButtonPaidClassic, ModernThe third action in a row, Show more, toolbarsText, Icon and side, Size, Width
Link ButtonPaidClassicForgot password, View all, legal linksText, URL, Size
Badge ButtonPaidClassic, ModernA queue with a count: Approvals 3Text, Count, Style, Icon, Size, Width
Back ButtonPaidClassic, ModernTop left of any screen that is not the home screenText, Style (ghost or outline), Size, Width
Split ButtonPaidClassic, ModernSave with Save and new and Save as draft behind a chevronMain action, Menu rows (label and icon, up to 5), Size, Width, Color
Action BarPaidClassic, ModernThe Cancel and Save bar along the bottom of an edit screenParts (hint, Cancel, Save disabled until valid), Primary, Cancel and Hint texts
Outline ButtonFreeClassic, ModernThe second action next to a primary one: Cancel, Back, SkipText, Icon and side, Size, Width
Loading ButtonPaidClassic, ModernSave buttons that wait for a Patch or a flow and must not be tapped twiceText, Text while busy, Demo reset seconds, Size, Width, Color
Gradient ButtonPaidClassic, ModernA hero button on a welcome screenText, Start and End color, Direction, Size, Width
Raised ButtonPaidClassic, ModernThe one action that must stand out on a busy home screenText, Size, Width, Color
Button GroupPaidClassicConnected segments in one outlined track, the active one tinted in the brand color. For a choice that changes a view or a filter: List, Board, Calendar. Three sizes and a scale. Light and dark.See the Settings tab

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: Buttons.

To copy a variant into Power Apps Studio, follow Getting Started.

After you paste

Every button has a comment in its OnSelect that says where your action goes. On a plain button that is the button itself; on a button with an icon it is the transparent button inside the container, named like the button with the btn prefix. Names use your prefix settings.

// Primary Button, OnSelect
SubmitForm(frmEdit)

// Danger Button: ask first, the modal deletes
UpdateContext({ varShowConfirm: true })

Loading Button keeps its state in varLoadingButtonBusy. The tap sets it true, the button is disabled and shows the ring, and the demo timer sets it false after a few seconds. In your app the Patch ends it, and you delete the timer:

UpdateContext({ varLoadingButtonBusy: true });
Patch(Orders, Defaults(Orders), { Title: txtTitle.Text });
UpdateContext({ varLoadingButtonBusy: false })

Split Button opens its menu with varShowSplitMenu; each row has its own OnSelect and closes the menu. Action Bar pins itself to the bottom edge with Y = Parent.Height - 72 and follows the screen width.

Good to know

  • Width is a number worked out from the text when the YAML is generated. Set a width in Settings to fix it, or edit Width in Studio after changing the text.
  • Two copies of the same button on one screen get the same control names; Studio renames the second copy with a suffix, which is fine. Only the Loading Button and the Split Button carry a variable; rename it on a second copy.
  • Ghost and outline buttons take their border, text and hover tint from the preview theme; filled buttons keep the brand color in both themes.
  • The Badge Button's count and the Split Button's rows are demo values; put CountRows into the pill and your actions into the rows.
  • Every button except the Link Button offers Classic and Modern YAML with the same size and text. The Link Button is a label, which is the same control in both sets.

Related

Library: Buttons. Related guides: Speed Dial for a floating action button, and Modals for the dialog a button usually opens.

Button Components for Power Apps | PowerLibs