PowerBlocks
LibraryPrimary Button
FREEbuttons

Primary Button

The Primary Button is the workhorse call-to-action of any Power Apps canvas screen — a solid blue, rounded button that draws the eye to the single most important action on a screen. It ships as clean, ready-to-paste YAML with a centered label, consistent padding and corner radius, so every primary action across your app looks identical without manual restyling.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

YAML source

# Primary Button — PowerBlocks (FREE)
# The rounded background is the container itself (Rectangle has no Radius properties).

- PrimaryButton:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      Width: =320
      Height: =44
      Fill: =RGBA(59, 130, 246, 1)
      RadiusTopLeft: =8
      RadiusTopRight: =8
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      DropShadow: =DropShadow.None
    Children:
      - BtnLabel:
          Control: Label
          Properties:
            Text: ="Confirm"
            X: =0
            Y: =0
            Width: =Parent.Width
            Height: =Parent.Height
            Color: =RGBA(255, 255, 255, 1)
            Align: =Align.Center
            VerticalAlign: =VerticalAlign.Middle
            FontWeight: =FontWeight.Semibold
            Size: =14

Common use cases

Submit and save flows

Use it as the confirm button on forms — wire OnSelect to SubmitForm or Patch so users always recognise the action that commits their data.

Wizard and onboarding steps

Place it as the 'Next' or 'Continue' control in multi-step flows where exactly one forward action should dominate the layout.

Empty-state primary action

Drop it into empty screens ('Create your first record') to give users one obvious, branded path forward.

How to use Primary Button in Power Apps

  1. 1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
  2. 2Click "Copy YAML" to copy the full component definition to your clipboard.
  3. 3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
  4. 4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.

Tip — Keep only one primary button visible per screen. Pair it with the Secondary Button for the cancel or back action to preserve a clear visual hierarchy.

Related buttons components