Button Components for Power Apps

Essential interactive elements that trigger actions, navigate between screens, and enable user interactions in your Power Apps.

What are buttons?

Buttons are the primary way users interact with your app. They trigger actions like saving data, navigating to other screens, opening dialogs, or submitting forms. Good button design makes your app intuitive and professional.

Choose your button style

Loading Button

Button with built-in loading state and spinner animation.

Best for: Form submissions, data processing actions, and operations that take time to complete.

Settings you can customize:

• Button text and loading text
• Colors and styling
• Loading spinner appearance
• Button size and shape

Gradient Button

Eye-catching button with gradient background effects.

Best for: Call-to-action buttons, primary actions, and highlighting important functions.

Settings you can customize:

• Gradient colors and direction
• Button text and styling
• Hover and active states
• Size and border radius

Outline Button

Clean button with border styling and transparent background.

Best for: Secondary actions, cancel buttons, and subtle interactions that don't need heavy emphasis.

Settings you can customize:

• Border color and thickness
• Text color and styling
• Hover effects
• Background on hover

Raised Button

Button with shadow and elevation effects for a material design feel.

Best for: Primary actions that need to stand out with depth and visual hierarchy.

Settings you can customize:

• Shadow depth and color
• Button elevation
• Background colors
• Text styling

Implementation steps

1. Select your button style

Go to Buttons and choose the style that matches your app's design and the button's importance.

2. Customize settings

Click on your chosen button and use the Settings tab to customize:

• Button text - Set the label that appears on the button
• Colors - Adjust background, text, and accent colors
• Size - Choose from different button sizes
• States - Configure hover, active, and disabled appearances

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect button actions

After pasting your button component, connect it to your app logic:

Form submission

// Submit form data
SubmitForm(MyForm); 
Navigate(SuccessScreen, ScreenTransition.Fade)

Data operations

// Save data with loading state
UpdateContext({IsLoading: true});
Patch(MyDataSource, Defaults(MyDataSource), MyForm.Updates);
UpdateContext({IsLoading: false})

Navigation

// Navigate to another screen
Navigate(DetailScreen, ScreenTransition.SlideLeft, {RecordID: MyRecord.ID})

Show/hide elements

// Toggle visibility of components
UpdateContext({ShowDetails: !ShowDetails})

Common use cases

Primary actions

Use gradient or raised buttons for main actions like "Save", "Submit", or "Continue".

Secondary actions

Use outline buttons for actions like "Cancel", "Back", or "Skip".

Loading states

Use loading buttons for operations that take time, like saving data or processing requests.

Call-to-action

Use gradient buttons for important actions you want users to take, like "Sign Up" or "Get Started".

Best practices

• Use consistent button styles throughout your app
• Make button text clear and action-oriented ("Save Changes" vs "Save")
• Ensure buttons are large enough for touch interaction (44px minimum)
• Provide visual feedback for button states (hover, active, disabled)
• Use loading states for operations that take more than 1-2 seconds

Troubleshooting

Button not responding to clicks

Check that the OnSelect property is properly configured with your action formulas.

Styling not applying

Verify that custom styling doesn't conflict with the button's built-in state management.

Loading state not working

Ensure that loading state variables are properly connected to your data operations.