Alerts & Dialogs

Alert Destructive

Added Jun 23, 2026

A bordered error alert with a red circle-alert icon. Use it to communicate critical failures that require immediate user attention.

Session expired

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

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 destructive error alert in Power Apps with a red circle icon, matching the shadcn/ui Alert destructive variant. Use it to communicate critical failures that require immediate action.

Integration

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

- conAlertDestructive:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(239, 68, 68, 0.5)
      BorderThickness: =1
      Fill: =RGBA(255, 255, 255, 1)
      Height: =64 + Max(24, RoundUp(Len("Your session has expired due to inactivity. Please sign in again to continue.") / 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='#dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>")
            Width: =16
            X: =16
            Y: =20
      - lblAlertTitle:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(220, 38, 38, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =13
            Text: ="Session expired"
            Width: =Parent.Width - 60
            X: =44
            Y: =16
      - lblAlertBody:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(220, 38, 38, 1)
            Font: =Font.'Open Sans'
            Height: =Max(24, RoundUp(Len("Your session has expired due to inactivity. Please sign in again to continue.") / 62, 0) * 18 + 4)
            Size: =12
            Text: ="Your session has expired due to inactivity. Please sign in again to continue."
            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