Confirmation Modal

The Confirmation Modal is an overlay dialog with a title, a customisable message and two action buttons — the safety net before any irreversible action. It centres a focused card over a dimmed backdrop so users consciously confirm or cancel destructive operations like delete or submit.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

Delete record?

This action cannot be undone. The record will be permanently deleted.

YAML source

# Confirmation Modal — PowerBlocks (FREE)
# The modal is VISIBLE right after pasting so you can style it immediately.
# Clicking "Cancel" or "Delete" hides it (Set(varShowConfirmModal, false)).
# Show it from anywhere with:  Set(varShowConfirmModal, true)

- ConfirmModalOverlay:
    Control: Rectangle
    Properties:
      X: =0
      Y: =0
      Width: =Parent.Width
      Height: =Parent.Height
      Fill: =RGBA(0, 0, 0, 0.35)
      Visible: =Coalesce(varShowConfirmModal, true)
- ConfirmModal:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      Width: =420
      Height: =230
      X: =Parent.Width / 2 - Self.Width / 2
      Y: =Parent.Height / 2 - Self.Height / 2
      Fill: =RGBA(255, 255, 255, 1)
      RadiusTopLeft: =16
      RadiusTopRight: =16
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      DropShadow: =DropShadow.Regular
      Visible: =Coalesce(varShowConfirmModal, true)
    Children:
      - ConfirmIcon:
          Control: Classic/Icon
          Properties:
            Icon: =Icon.Warning
            X: =24
            Y: =26
            Width: =28
            Height: =28
            Color: =RGBA(239, 68, 68, 1)
      - ConfirmTitle:
          Control: Label
          Properties:
            Text: ="Delete record?"
            X: =62
            Y: =24
            Width: =Parent.Width - 86
            Height: =32
            Color: =RGBA(17, 24, 39, 1)
            Size: =15
            FontWeight: =FontWeight.Semibold
      - ConfirmMessage:
          Control: Label
          Properties:
            Text: ="This action cannot be undone. The record will be permanently deleted."
            X: =24
            Y: =70
            Width: =Parent.Width - 48
            Height: =70
            Color: =RGBA(107, 114, 128, 1)
            Size: =12
      - ConfirmBtnCancel:
          Control: Classic/Button
          Properties:
            Text: ="Cancel"
            X: =24
            Y: =160
            Width: =180
            Height: =44
            Fill: =RGBA(243, 244, 246, 1)
            HoverFill: =RGBA(229, 231, 235, 1)
            PressedFill: =RGBA(209, 213, 219, 1)
            Color: =RGBA(55, 65, 81, 1)
            BorderThickness: =0
            Size: =12
            FontWeight: =FontWeight.Semibold
            RadiusTopLeft: =10
            RadiusTopRight: =10
            RadiusBottomLeft: =10
            RadiusBottomRight: =10
            OnSelect: =Set(varShowConfirmModal, false)
      - ConfirmBtnDelete:
          Control: Classic/Button
          Properties:
            Text: ="Delete"
            X: =216
            Y: =160
            Width: =180
            Height: =44
            Fill: =RGBA(239, 68, 68, 1)
            HoverFill: =RGBA(220, 38, 38, 1)
            PressedFill: =RGBA(185, 28, 28, 1)
            Color: =RGBA(255, 255, 255, 1)
            BorderThickness: =0
            Size: =12
            FontWeight: =FontWeight.Semibold
            RadiusTopLeft: =10
            RadiusTopRight: =10
            RadiusBottomLeft: =10
            RadiusBottomRight: =10
            OnSelect: |-
              =// TODO — run your destructive action here, e.g.:
              // Remove(YourDataSource, varSelectedRecord);
              Set(varShowConfirmModal, false)

Common use cases

Delete confirmation

Ask 'Delete this record?' before running Remove so accidental taps don't lose data.

Submit gates

Confirm before committing a form or sending a request that can't be undone.

Sign-out and reset

Guard actions that clear state or log the user out.

How to use Confirmation Modal in Power Apps

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

Tip — Toggle the modal with a boolean context variable and trap focus on the confirm button so keyboard users can act quickly.

Related modals components

PRO

Form Modal

PRO

Info Modal