Alerts & Dialogs

Alert Success

Added Jun 23, 2026

A simple bordered alert box with an icon, title, and description. Directly inspired by the shadcn/ui Alert component.

Subscription activated

Your Pro plan is now active. You have access to all premium features and priority support.

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.
Resize conClassicAlert.Width to fit your layout: all inner controls adapt via Parent.Width.

Problem Solved

Renders a clean bordered alert box in Power Apps matching the shadcn/ui Alert style: rounded corners, subtle border, icon aligned to the first line of the title, and muted description text.

Integration

Set varAlertTitle and varAlertBody as context or global variables from your app logic (e.g. on form submit success, on API error). The component is purely presentational: wire Visible to a boolean to show/hide it.

- conClassicAlert:
    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("Your Pro plan is now active. You have access to all premium features and priority support.") / 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='#0f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></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: ="Subscription activated"
            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("Your Pro plan is now active. You have access to all premium features and priority support.") / 62, 0) * 18 + 4)
            Size: =12
            Text: ="Your Pro plan is now active. You have access to all premium features and priority support."
            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