Buttons

Button Group

Added Aug 11, 2026

A row of merged button clusters (a back-icon button, an Archive/Report pair, and a Snooze/More pair), each cluster's adjacent buttons sharing a continuous border with only the outer corners rounded. Inspired by the shadcn/ui ButtonGroup composition.

CopySnips Live Preview

How to Use

No settings: all button text is fixed; edit it directly in the pasted YAML if you need different wording.
Paste the YAML into Power Apps Studio (Ctrl+V). One GroupContainer (conButtonGroup) is added. Everything nests inside it via Horizontal AutoLayout.
Adjacent buttons within the same cluster (Archive+Report, Snooze+More) sit with zero gap and share a border. Each shows RadiusTopLeft/RadiusBottomLeft or RadiusTopRight/RadiusBottomRight only on its OUTER edge, so the pair reads as one connected control, matching the shadcn/ui ButtonGroup look (same technique as Button Search's merged input+button).
Each button shows a placeholder confirmation toast (Notify()) on click; wire each one's OnSelect to your real action once connected. The full dropdown menu behind the "•••" button (with its nested "Label As..." submenu and radio group) was deliberately left out: a working nested dropdown/submenu/radio system is a much larger, separate undertaking; "•••" is a placeholder action for now.
No OnVisible initialisation needed.

Problem Solved

Provides a ready-made row of merged button clusters (a common toolbar pattern, e.g. email actions) which Power Apps has no native "grouped buttons" primitive for, so this is normally hand-built corner-radius-by-corner-radius each time.

Integration

All content is fixed text substituted directly into the copied YAML (no settings-driven content). Wire each button's OnSelect (btnGroupBack/btnGroupArchive/btnGroupReport/btnGroupSnooze/btnGroupMore) to your real actions once connected.

- conButtonGroup:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.None
      Height: =36
      LayoutAlignItems: =LayoutAlignItems.Center
      LayoutDirection: =LayoutDirection.Horizontal
      LayoutGap: =8
      LayoutMinHeight: =0
      PaddingLeft: =1
      PaddingRight: =1
      Width: =304
      X: =20
      Y: =20
    Children:
      - btnGroupBack:
          Control: Classic/Button@2.2.0
          Properties:
            Align: =Align.Center
            AlignInContainer: =AlignInContainer.Center
            BorderColor: =RGBA(226, 232, 240, 1)
            BorderStyle: =BorderStyle.Solid
            BorderThickness: =1
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(255, 255, 255, 1)
            FillPortions: =0
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            HoverBorderColor: =RGBA(148, 163, 184, 1)
            FocusedBorderThickness: =1
            HoverColor: =RGBA(15, 23, 42, 1)
            HoverFill: =RGBA(248, 250, 252, 1)
            LayoutMinHeight: =0
            OnSelect: =Notify("Going back — wire this button to your real navigation once connected.", NotificationType.Information)
            PressedFill: =RGBA(241, 245, 249, 1)
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Size: =16
            Text: ="←"
            Height: =Parent.Height - 2
            Width: =36
      - conGroupArchiveReport:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            FillPortions: =0
            DropShadow: =DropShadow.None
            Fill: =RGBA(0, 0, 0, 0)
            LayoutAlignItems: =LayoutAlignItems.Stretch
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =0
            LayoutMinHeight: =0
            Height: =Parent.Height
            Width: =144
          Children:
            - btnGroupArchive:
                Control: Classic/Button@2.2.0
                Properties:
                  Align: =Align.Center
                  AlignInContainer: =AlignInContainer.Center
                  BorderColor: =RGBA(226, 232, 240, 1)
                  BorderStyle: =BorderStyle.Solid
                  BorderThickness: =1
                  Color: =RGBA(15, 23, 42, 1)
                  Fill: =RGBA(255, 255, 255, 1)
                  FillPortions: =0
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  HoverBorderColor: =RGBA(148, 163, 184, 1)
                  FocusedBorderThickness: =1
                  HoverColor: =RGBA(15, 23, 42, 1)
                  HoverFill: =RGBA(248, 250, 252, 1)
                  LayoutMinHeight: =0
                  OnSelect: =Notify("Archived — wire this button to your real action once connected.", NotificationType.Information)
                  PressedFill: =RGBA(241, 245, 249, 1)
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =0
                  RadiusTopLeft: =8
                  RadiusTopRight: =0
                  Size: =10
                  Text: ="Archive"
                  Height: =Parent.Height - 2
                  Width: =76
            - btnGroupReport:
                Control: Classic/Button@2.2.0
                Properties:
                  Align: =Align.Center
                  AlignInContainer: =AlignInContainer.Center
                  BorderColor: =RGBA(226, 232, 240, 1)
                  BorderStyle: =BorderStyle.Solid
                  BorderThickness: =1
                  Color: =RGBA(15, 23, 42, 1)
                  Fill: =RGBA(255, 255, 255, 1)
                  FillPortions: =0
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  HoverBorderColor: =RGBA(148, 163, 184, 1)
                  FocusedBorderThickness: =1
                  HoverColor: =RGBA(15, 23, 42, 1)
                  HoverFill: =RGBA(248, 250, 252, 1)
                  LayoutMinHeight: =0
                  OnSelect: =Notify("Reported — wire this button to your real action once connected.", NotificationType.Information)
                  PressedFill: =RGBA(241, 245, 249, 1)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =8
                  RadiusTopLeft: =0
                  RadiusTopRight: =8
                  Size: =10
                  Text: ="Report"
                  Height: =Parent.Height - 2
                  Width: =68
      - conGroupSnoozeMore:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            FillPortions: =0
            DropShadow: =DropShadow.None
            Fill: =RGBA(0, 0, 0, 0)
            LayoutAlignItems: =LayoutAlignItems.Stretch
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =0
            LayoutMinHeight: =0
            Height: =Parent.Height
            Width: =106
          Children:
            - btnGroupSnooze:
                Control: Classic/Button@2.2.0
                Properties:
                  Align: =Align.Center
                  AlignInContainer: =AlignInContainer.Center
                  BorderColor: =RGBA(226, 232, 240, 1)
                  BorderStyle: =BorderStyle.Solid
                  BorderThickness: =1
                  Color: =RGBA(15, 23, 42, 1)
                  Fill: =RGBA(255, 255, 255, 1)
                  FillPortions: =0
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  HoverBorderColor: =RGBA(148, 163, 184, 1)
                  FocusedBorderThickness: =1
                  HoverColor: =RGBA(15, 23, 42, 1)
                  HoverFill: =RGBA(248, 250, 252, 1)
                  LayoutMinHeight: =0
                  OnSelect: =Notify("Snoozed — wire this button to your real action once connected.", NotificationType.Information)
                  PressedFill: =RGBA(241, 245, 249, 1)
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =0
                  RadiusTopLeft: =8
                  RadiusTopRight: =0
                  Size: =10
                  Text: ="Snooze"
                  Height: =Parent.Height - 2
                  Width: =70
            - btnGroupMore:
                Control: Classic/Button@2.2.0
                Properties:
                  Align: =Align.Center
                  AlignInContainer: =AlignInContainer.Center
                  BorderColor: =RGBA(226, 232, 240, 1)
                  BorderStyle: =BorderStyle.Solid
                  BorderThickness: =1
                  Color: =RGBA(15, 23, 42, 1)
                  Fill: =RGBA(255, 255, 255, 1)
                  FillPortions: =0
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  HoverBorderColor: =RGBA(148, 163, 184, 1)
                  FocusedBorderThickness: =1
                  HoverColor: =RGBA(15, 23, 42, 1)
                  HoverFill: =RGBA(248, 250, 252, 1)
                  LayoutMinHeight: =0
                  OnSelect: =Notify("More options — wire this button to your real menu once connected.", NotificationType.Information)
                  PressedFill: =RGBA(241, 245, 249, 1)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =8
                  RadiusTopLeft: =0
                  RadiusTopRight: =8
                  Size: =14
                  Text: ="•••"
                  Height: =Parent.Height - 2
                  Width: =36

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Button Group

How to Use

Problem Solved

Integration

YAML Code

Implementation