Dialog

Modal dialog with backdrop blur, dynamic buttons, form input with validation, and 7 icon variants. Supports Alert, Confirmation, and Form types with full light/dark theming.

Modern controls required

Most components in this library use modern control properties like LayoutMode, AutoLayout, and LayoutDirection. Enable them in Power Apps Studio under Settings → Updates → Preview → Modern controls and themes.

cmpEnhancedDialog.yaml

Import via Components → New component → Import from code → paste YAML

Preview

Session Expired

Your session has expired. Please sign in again to continue.

Alert

Confirm Action

Are you sure you want to continue?

Confirmation

Delete Record

This action cannot be undone. Please provide a reason.

*Reason for deleting (required)

Reason for deleting...

Form

Icon Variants

Warning

Error

Success

Info

Restricted

NoAccess

Usage

Basic confirmation dialog

// Show dialog
btnDelete.OnSelect = Set(varShowDialog, true)

// Dialog properties
cmpEnhancedDialog.Visible = varShowDialog
cmpEnhancedDialog.DialogType = "Confirmation"
cmpEnhancedDialog.HeaderText = "Delete Item"
cmpEnhancedDialog.MessageText = "This cannot be undone."
cmpEnhancedDialog.IconName = "Warning"

// Handle response
cmpEnhancedDialog.OnButtonSelect =
    If(
        cmpEnhancedDialog.SelectedButton.Action = "Confirm",
        Remove(Items, ThisItem)
    );
    Set(varShowDialog, false)

Form dialog with required input

cmpEnhancedDialog.DialogType = "Form"
cmpEnhancedDialog.IsTextInputRequired = true
cmpEnhancedDialog.PlaceholderText = "Reason for rejection"
cmpEnhancedDialog.Buttons = Table(
    {Label: "Cancel", ButtonType: "Secondary", Action: "Cancel", Visible: true},
    {Label: "Reject", ButtonType: "Primary", Action: "Reject", Visible: true}
)

// Reject button stays disabled until text is entered
cmpEnhancedDialog.OnButtonSelect =
    If(
        cmpEnhancedDialog.SelectedButton.Action = "Reject",
        Patch(Requests, ThisItem, {
            Status: "Rejected",
            RejectionReason: cmpEnhancedDialog.InputText
        })
    );
    Set(varShowDialog, false)

Custom button configuration

// Three buttons with different appearances
cmpEnhancedDialog.Buttons = Table(
    {Label: "Discard", ButtonType: "Transparent", Action: "Discard", Visible: true},
    {Label: "Cancel",  ButtonType: "Secondary",   Action: "Cancel",  Visible: true},
    {Label: "Save",    ButtonType: "Primary",     Action: "Save",    Visible: true}
)

// Switch on action
cmpEnhancedDialog.OnButtonSelect =
    Switch(
        cmpEnhancedDialog.SelectedButton.Action,
        "Save",    SubmitForm(frmEdit),
        "Discard", ResetForm(frmEdit)
    );
    Set(varShowDialog, false)

Dismissible with close icon

// ShowCloseIcon enables X button AND background tap to dismiss
cmpEnhancedDialog.ShowCloseIcon = true

cmpEnhancedDialog.OnCloseSelect =
    Set(varShowDialog, false)

// When ShowCloseIcon = false, only buttons can dismiss
// This prevents accidental dismissal on critical actions

Input Properties

Property	Type	Default
`DialogType` "Alert", "Confirmation", or "Form"	Text	"Confirmation"
`Buttons` Table with Label, ButtonType (Primary/Secondary/Outline/Subtle/Transparent), Action, and Visible columns	Table	Cancel + Confirm
`HeaderText` Title displayed in the dialog header	Text	"Confirm Action"
`MessageText` Body text below the header	Text	"Are you sure..."
`PlaceholderText` Label and placeholder text for the Form input	Text	"Enter text"
`IsTextInputRequired` Marks input as required. Disables Primary buttons until filled.	Boolean	false
`IconName` Warning, Error, Success, Info, Restricted, NoAccess, Danger, or None	Text	"Warning"
`DialogHeight` Fixed height in pixels. Set to 0 for auto-sizing.	Number	0
`DialogWidth` Dialog width in pixels. Auto-sizes per type when set to 0.	Number	400
`BorderRadius` Corner radius for dialog and footer	Number	10
`OverlayBlurColor` Backdrop overlay color as CSS RGBA string	Text	"RGBA(0,0,0,0.4)"
`ShowCloseIcon` Show X button in header. Also enables background tap to dismiss.	Boolean	false
`Theme` "Light" or "Dark"	Text	"Light"

Events & Output

Property	Kind	Description
`OnButtonSelect`	Event	Fires when any button is tapped. Read SelectedButton to determine which.
`OnCloseSelect`	Event	Fires when the close icon or background overlay is tapped.
`ContentHeight`	Output	Current height of the content area in pixels.
`ContentWidth`	Output	Current width of the content area in pixels.
`InputText`	Output	Current value of the text input (Form type only).
`SelectedButton`	Output	Record of the last tapped button (Label, ButtonType, Action, Visible).

Dialog Types

Type	Icon	Header	Message	Input	Buttons
Alert	Centered, 48dp	Centered	Centered	Hidden	Centered
Confirmation	Inline, 35dp	Left	Left	Hidden	Right
Form	Inline, 35dp	Left	Left	Visible	Right

Implementation Details

The component fills the entire screen (App.Width by App.Height) with a transparent overlay. An HtmlViewer renders a CSS backdrop-filter blur behind the dialog card, creating the frosted-glass effect. The blur color and opacity are controlled by the OverlayBlurColor property, which accepts any valid CSS color string.

The dialog card (cntDialogMain) is centered on screen and auto-sizes its height based on content: header height plus message height plus content area plus footer plus 22px of internal spacing. You can override this by setting DialogHeight to a non-zero value. Width auto-selects per type (380 for Alert, 400 for Confirmation, 500 for Form) but respects DialogWidth when explicitly set, always capping at Parent.Width minus 32px for mobile safety.

Buttons are rendered through a horizontal gallery (galButtons) driven by the Buttons table. Each row maps ButtonType to a modern Button appearance variant (Primary, Secondary, Outline, Subtle, Transparent). The gallery filters by the Visible column, so you can conditionally show or hide buttons at runtime. Button width auto-sizes based on label length.

When DialogType is set to Form, a multiline TextInput appears between the message and footer. If IsTextInputRequired is true, a red asterisk label appears above the input and all Primary buttons are disabled until the input has a value. The input resets automatically when any button is tapped or the dialog is closed.

Background dismissal is guarded by ShowCloseIcon. When ShowCloseIcon is false, tapping the overlay or background does nothing, forcing the user to interact with the buttons. This prevents accidental dismissal on critical dialogs. When ShowCloseIcon is true, both the X button and the background trigger OnCloseSelect.

All colors derive from a single Theme property set to “Light” or “Dark”. The component uses Tailwind-style gray scale values: gray-800 dialog background in dark mode, gray-900 footer, gray-700 dividers. Icon circles use semantic background tints (red for error, green for success, blue for info) that adapt to the theme. Icons are inline SVG rendered through Image controls with theme-aware stroke colors.

Examples

Alert — session expired

Session Expired

Your session has expired. Please sign in again to continue.

cmpEnhancedDialog.DialogType = "Alert"
cmpEnhancedDialog.IconName = "Info"
cmpEnhancedDialog.HeaderText = "Session Expired"
cmpEnhancedDialog.MessageText = "Your session has expired. Please sign in again."
cmpEnhancedDialog.Buttons = Table(
    {Label: "Sign In", ButtonType: "Primary", Action: "SignIn", Visible: true}
)

cmpEnhancedDialog.OnButtonSelect =
    Navigate(LoginScreen)

Confirmation — with close icon

Confirm Action

Are you sure you want to continue?

cmpEnhancedDialog.DialogType = "Confirmation"
cmpEnhancedDialog.IconName = "Warning"
cmpEnhancedDialog.HeaderText = "Confirm Action"
cmpEnhancedDialog.MessageText = "Are you sure you want to continue?"
cmpEnhancedDialog.ShowCloseIcon = true

cmpEnhancedDialog.OnButtonSelect =
    If(
        cmpEnhancedDialog.SelectedButton.Action = "Confirm",
        // Proceed
        Set(varDialogVisible, false),
        // Cancel
        Set(varDialogVisible, false)
    )

cmpEnhancedDialog.OnCloseSelect =
    Set(varDialogVisible, false)

Form — delete with required reason

Delete Record

This action cannot be undone. Please provide a reason.

*Reason for deleting (required)

Reason for deleting...

cmpEnhancedDialog.DialogType = "Form"
cmpEnhancedDialog.IconName = "Error"
cmpEnhancedDialog.HeaderText = "Delete Record"
cmpEnhancedDialog.MessageText = "This action cannot be undone."
cmpEnhancedDialog.IsTextInputRequired = true
cmpEnhancedDialog.PlaceholderText = "Reason for deleting"
cmpEnhancedDialog.Buttons = Table(
    {Label: "Cancel", ButtonType: "Secondary", Action: "Cancel", Visible: true},
    {Label: "Delete", ButtonType: "Primary", Action: "Delete", Visible: true}
)

cmpEnhancedDialog.OnButtonSelect =
    If(
        cmpEnhancedDialog.SelectedButton.Action = "Delete",
        Patch(Records, ThisItem, {IsDeleted: true, Reason: cmpEnhancedDialog.InputText})
    );
    Set(varDialogVisible, false)

Success alert

Record Saved

Your changes have been saved successfully.

cmpEnhancedDialog.DialogType = "Alert"
cmpEnhancedDialog.IconName = "Success"
cmpEnhancedDialog.HeaderText = "Record Saved"
cmpEnhancedDialog.MessageText = "Your changes have been saved successfully."
cmpEnhancedDialog.Buttons = Table(
    {Label: "OK", ButtonType: "Primary", Action: "OK", Visible: true}
)

Dark theme confirmation

Confirm Action

Are you sure you want to continue?

cmpEnhancedDialog.Theme = "Dark"
cmpEnhancedDialog.DialogType = "Confirmation"
cmpEnhancedDialog.IconName = "Warning"
cmpEnhancedDialog.ShowCloseIcon = true

Three-button layout

Save Changes

You have unsaved changes. What would you like to do?

cmpEnhancedDialog.Buttons = Table(
    {Label: "Discard", ButtonType: "Transparent", Action: "Discard", Visible: true},
    {Label: "Cancel",  ButtonType: "Secondary",   Action: "Cancel",  Visible: true},
    {Label: "Save",    ButtonType: "Primary",     Action: "Save",    Visible: true}
)

cmpEnhancedDialog.OnButtonSelect =
    Switch(
        cmpEnhancedDialog.SelectedButton.Action,
        "Save",    SubmitForm(frmEdit); Set(varDialogVisible, false),
        "Discard", ResetForm(frmEdit); Set(varDialogVisible, false),
        "Cancel",  Set(varDialogVisible, false)
    )

Component Architecture

cmpEnhancedDialog
└── cntMainDialog (GroupContainer — full screen overlay)
    ├── htmlBackgroundBlur (HtmlViewer — CSS backdrop-filter)
    ├── btnBackgroundClose (Button — dismiss on tap)
    └── cntDialogMain (GroupContainer — dialog card)
        ├── cntFooter (GroupContainer — AutoLayout, bottom)
        │   └── galButtons (Gallery — horizontal)
        │       └── btnDynamic (Button — per-button from table)
        ├── rectDividerFooter (Rectangle — 1px line)
        ├── cntContent (GroupContainer — Form type only)
        │   ├── lblAsterisk (Text — red "*")
        │   ├── lblRequiredLabel (Text — "PlaceholderText (required)")
        │   └── txtInput (TextInput — multiline with border)
        ├── cntMessage (GroupContainer)
        │   └── lblMessage (Text — body text)
        ├── rectDividerHeader (Rectangle — hidden for Alert)
        ├── cntHeader (GroupContainer — AutoLayout)
        │   ├── cntIconCircle (GroupContainer — colored circle)
        │   │   └── imgIcon (Image — inline SVG)
        │   └── lblHeader (Text — title)
        └── cntCloseIcon (GroupContainer — absolute top-right)
            ├── icnClose (Classic/Icon — cancel icon)
            └── btnCloseHit (Classic/Button — tap target)