Alerts & Dialogs

Alert Warning

Added Jun 23, 2026

A bordered warning alert with a triangle icon in amber. Use it to flag non-critical issues that require user attention.

Unsaved changes

You have unsaved changes that will be lost if you leave this page. Make sure to save before continuing.

CopySnips Live Preview

How to Use

Paste the copied YAML into Power Apps Studio (Ctrl+V).
Set varAlertTitle for the bold heading text.
Set varAlertBody for the description paragraph below the title.
The container height adjusts automatically based on the description length.
Wire Visible to a boolean variable to show or hide the alert conditionally.

Problem Solved

Renders a warning alert box in Power Apps with an amber triangle icon, matching the shadcn/ui Alert style. Use it to draw attention to non-critical issues without blocking user flow.

Integration

Set varAlertTitle and varAlertBody as context or global variables from your app logic. Toggle the Visible property of conAlertWarning to show it only when needed.

- conAlertWarning:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      Fill: =RGBA(255, 255, 255, 1)
      Height: =64 + Max(24, RoundUp(Len("You have unsaved changes that will be lost if you leave this page. Make sure to save before continuing.") / 62, 0) * 18 + 4)
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Width: =502
      X: =100
      Y: =100
    Children:
      - icoAlertIcon:
          Control: Image@2.2.3
          Properties:
            Height: =16
            Image: ="data:image/svg+xml," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>")
            Width: =16
            X: =16
            Y: =20
      - lblAlertTitle:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =13
            Text: ="Unsaved changes"
            Width: =Parent.Width - 60
            X: =44
            Y: =16
      - lblAlertBody:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =Max(24, RoundUp(Len("You have unsaved changes that will be lost if you leave this page. Make sure to save before continuing.") / 62, 0) * 18 + 4)
            Size: =12
            Text: ="You have unsaved changes that will be lost if you leave this page. Make sure to save before continuing."
            Width: =Parent.Width - 60
            X: =44
            Y: =48

Implementation

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

Something not pasting right? Troubleshooting guide