Button Group for Power Apps

Add connected button sets for related actions and toggle selections. Button groups visually combine multiple buttons into a single cohesive control.

When to use button groups

Button groups work great when you have 2-5 related options that users choose between. Unlike separate buttons, they show that the options are connected and often mutually exclusive.

Button Group Component

Connected buttons that form a single visual unit. Buttons share borders and have a unified appearance.

Best for: View selectors (Grid/List), time range filters (Day/Week/Month), sort options (Newest/Popular), and any related choice set.

Settings you can customize:

• Button labels (text for each option)
• Number of buttons
• Button IDs for tracking selection
• Active state styling

Implementation steps

1. Go to Button Group

Navigate to Button Group in the component library.

2. Configure your buttons

Click on the component and use the Settings tab to:

• Add buttons - Set the text for each option
• Name buttons - Give each button a unique ID
• Set styling - Adjust colors to match your app

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 group logic

After pasting, set up selection tracking and actions:

Track selected option

// On button click, set the selected option
Set(varSelectedOption, "Option 1")

// Each button sets its own value
// Button 1: Set(varSelectedOption, "Option 1")
// Button 2: Set(varSelectedOption, "Option 2")
// Button 3: Set(varSelectedOption, "Option 3")

Highlight active button

// Button Fill - highlight when selected
If(varSelectedOption = "Option 1", 
    RGBA(59, 130, 246, 1),  // Blue when active
    RGBA(255, 255, 255, 1)  // White when inactive
)

// Button Text Color
If(varSelectedOption = "Option 1",
    White,
    RGBA(100, 100, 100, 1)
)

Filter data based on selection

// Filter gallery items
Switch(
    varSelectedOption,
    "All", Products,
    "Active", Filter(Products, Status = "Active"),
    "Archived", Filter(Products, Status = "Archived")
)

Change view layout

// Toggle between grid and list view
If(varSelectedOption = "Grid",
    // Show grid gallery
    Set(varShowGrid, true); Set(varShowList, false),
    // Show list gallery
    Set(varShowGrid, false); Set(varShowList, true)
)

Navigate to different screens

// Each button navigates to a screen
Switch(
    varSelectedOption,
    "Dashboard", Navigate(DashboardScreen),
    "Reports", Navigate(ReportsScreen),
    "Settings", Navigate(SettingsScreen)
)

Common use cases

View switcher

Use button group with "Grid" and "List" options to toggle how a gallery displays items.

Time range filter

Options like "Today", "Week", "Month", "Year" to filter data by time period.

Sort options

"Newest", "Oldest", "Popular" to change how items are ordered in a gallery.

Status filter

"All", "Active", "Completed", "Archived" to filter items by their status.

Category filter

Quick filter by category without using a dropdown - good when you have 3-4 main categories.

Action grouping

"Edit", "Copy", "Delete" for record actions - though be careful with destructive actions in button groups.

Best practices

• Limit to 2-4 options - Too many buttons become hard to read
• Use short labels - "Week" not "This Week's View"
• Order logically - Most common first, or follow a natural sequence
• Show active state clearly - Users should instantly see which option is selected
• Make buttons same width - Uneven buttons look unbalanced
• Consider mobile - Buttons need to be large enough to tap on small screens
• Set a default - Always have one option selected on load

Troubleshooting

Selection not highlighting

Check that your button Fill property references your selection variable and the value matches exactly.

All buttons triggering same action

Make sure each button's OnSelect sets a unique value. Don't copy the same formula to all buttons.

Buttons different sizes

Ensure all button Width properties are equal, or use a container with even distribution.

Selection resetting on navigation

Store the selection in a global variable (Set) rather than context variable (UpdateContext) if you need it to persist across screens.

Styling inconsistent

Apply the same border, radius, and spacing to all buttons. The connecting borders should make them look like one unit.