Alerts & Dialogs

Classic Alert Dialog

Added Jul 5, 2026

A modal confirmation dialog triggered by a button. Uses a semi-transparent overlay to block interaction, with Cancel and Continue actions. Inspired by the shadcn/ui AlertDialog component.

CopySnips Live Preview

How to Use

Paste the copied YAML into Power Apps Studio (Ctrl+V). Three controls are added: btnShowAlertDialog, rectAlertDialogOverlay, and conAlertDialog.
Create a Boolean context variable named varShowAlertDialog (default: false) on your screen.
The trigger button (btnShowAlertDialog) sets varShowAlertDialog = true via UpdateContext.
Both btnAlertDialogCancel and btnAlertDialogAction set varShowAlertDialog = false to close the dialog.
Replace the OnSelect of btnAlertDialogAction with your own logic before the UpdateContext call.
The overlay (rectAlertDialogOverlay) must sit above other screen controls in the Z-order; move it up in the tree view if needed.

Problem Solved

Provides a destructive-action confirmation pattern for Power Apps Canvas: a centered modal dialog with a dimmed backdrop that prevents accidental clicks on the underlying screen.

Integration

Trigger the dialog from any control with UpdateContext({varShowAlertDialog: true}). The dialog centers itself using App.Width and App.Height so it works on any screen size. Rename varShowAlertDialog to avoid collisions if you use multiple dialogs.

- btnShowAlertDialog:
    Control: Classic/Button@2.2.0
    Properties:
      Fill: =RGBA(255, 255, 255, 1)
      HoverFill: =RGBA(244, 244, 245, 1)
      PressedFill: =RGBA(228, 228, 231, 1)
      Color: =RGBA(9, 9, 11, 1)
      HoverColor: =RGBA(9, 9, 11, 1)
      PressedColor: =RGBA(9, 9, 11, 1)
      BorderColor: =RGBA(228, 228, 231, 1)
      BorderThickness: =1
      FocusedBorderColor: =RGBA(0, 0, 0, 0)
      HoverBorderColor: =RGBA(228, 228, 231, 1)
      PressedBorderColor: =RGBA(228, 228, 231, 1)
      Height: =40
      OnSelect: "=UpdateContext({varShowAlertDialog: true})"
      Size: =10
      Text: ="Show Dialog"
      Width: =140
      X: =100
      Y: =100
- rectAlertDialogOverlay:
    Control: Rectangle@2.3.0
    Properties:
      Fill: =RGBA(0, 0, 0, 0.8)
      Height: =App.Height
      Width: =App.Width
      Visible: =varShowAlertDialog
      X: =0
      Y: =0
- conAlertDialog:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(228, 228, 231, 1)
      BorderThickness: =1
      Fill: =RGBA(255, 255, 255, 1)
      Height: =200
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Visible: =varShowAlertDialog
      Width: =512
      X: =(App.Width - 512) / 2
      Y: =(App.Height - 200) / 2
    Children:
      - lblAlertDialogTitle:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(9, 9, 11, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =28
            Size: =13
            Text: ="Delete this item?"
            Width: =464
            X: =24
            Y: =24
      - lblAlertDialogDesc:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(113, 113, 122, 1)
            Font: =Font.'Open Sans'
            Height: =48
            Size: =11
            Text: ="This item will be permanently deleted. You won't be able to recover it."
            Width: =464
            X: =24
            Y: =60
      - btnAlertDialogCancel:
          Control: Classic/Button@2.2.0
          Properties:
            Fill: =RGBA(255, 255, 255, 1)
            HoverFill: =RGBA(244, 244, 245, 1)
            PressedFill: =RGBA(228, 228, 231, 1)
            Color: =RGBA(9, 9, 11, 1)
            HoverColor: =RGBA(9, 9, 11, 1)
            PressedColor: =RGBA(9, 9, 11, 1)
            BorderColor: =RGBA(228, 228, 231, 1)
            BorderThickness: =1
            FocusedBorderColor: =RGBA(0, 0, 0, 0)
            HoverBorderColor: =RGBA(228, 228, 231, 1)
            PressedBorderColor: =RGBA(228, 228, 231, 1)
            Height: =36
            OnSelect: "=UpdateContext({varShowAlertDialog: false})"
            Size: =11
            Text: ="Cancel"
            Width: =108
            X: =272
            Y: =140
      - btnAlertDialogAction:
          Control: Classic/Button@2.2.0
          Properties:
            Fill: =RGBA(9, 9, 11, 1)
            HoverFill: =RGBA(30, 30, 35, 1)
            PressedFill: =RGBA(50, 50, 56, 1)
            Color: =RGBA(250, 250, 250, 1)
            HoverColor: =RGBA(250, 250, 250, 1)
            PressedColor: =RGBA(250, 250, 250, 1)
            BorderColor: =RGBA(9, 9, 11, 1)
            BorderThickness: =0
            FocusedBorderColor: =RGBA(0, 0, 0, 0)
            HoverBorderColor: =RGBA(0, 0, 0, 0)
            PressedBorderColor: =RGBA(0, 0, 0, 0)
            Height: =36
            OnSelect: "=UpdateContext({varShowAlertDialog: false})"
            Size: =11
            Text: ="Delete"
            Width: =108
            X: =388
            Y: =140

Implementation

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

Something not pasting right? Troubleshooting guide

Classic Alert Dialog

Content

How to Use

Problem Solved

Integration

YAML Code

Implementation