Mastering Popups in .NET MAUI: Alerts, Action Sheets, Overlays & More

Note: Before proceeding, please refer to the getting started with .NET MAUI Popup control documentation.

1. Modal dialog (Confirm)

A modal dialog blocks the rest of the UI until the user chooses an explicit action (OK/Cancel). Use it for decisions that require clear consent.

Refer to the following code example for confirming actions.

<popup:SfPopup x:Name="ModalDialog"
                    IsOpen="{Binding IsModalOpen}"
                    ShowHeader="True"
                    ShowFooter="True"
                    StaysOpen="True"              
                    AutoSizeMode="Height"
                    HeaderTitle="Confirm Action">
  
  <popup:SfPopup.ContentTemplate>
    <DataTemplate>
      <VerticalStackLayout Padding="12" Spacing="8" WidthRequest="300">
        <Label Text="Proceed with this operation?" />
      </VerticalStackLayout>
    </DataTemplate>
  </popup:SfPopup.ContentTemplate>
  
  <popup:SfPopup.FooterTemplate>
    <DataTemplate>
      <Grid Padding="20" ColumnSpacing="12" ColumnDefinitions="Auto, Auto" HorizontalOptions="End">
        <Button Text="Cancel" Command="{Binding CloseModalCommand}" Style="{StaticResource DeclineButtonStyle}" />
        <Button Text="OK" Command="{Binding CloseModalCommand}" Style="{StaticResource AcceptButtonStyle}" />
      </Grid>
    </DataTemplate>
  </popup:SfPopup.FooterTemplate>
</popup:SfPopup>

Refer to the following image.

2. Non-modal info (toast/snackbar-like)

It is a lightweight, temporary feedback that does not block interaction, such as “Success”, “Saved”, “Copied”.

Use cases

• Quick confirmations.
• Background operation results.
• Low-severity warnings.

Note: Avoid using non-modal info popups for critical or destructive decisions—use a modal popup instead.

Refer to the code example for the non-modal info popup implementation.

<popup:SfPopup x:Name="ToastPopup"
                    IsOpen="{Binding IsToastOpen}"
                    ShowHeader="False"
                    ShowFooter="False"
                    StaysOpen="False"
                    AutoSizeMode="Height"
                    RelativeView="{x:Reference RootLayout}"
                    AbsoluteX="-50"
                    AbsoluteY="-50"
                    RelativePosition="AlignBottomRight"
                    ShowOverlayAlways="False">

    <popup:SfPopup.ContentTemplate>
        <DataTemplate>
            <HorizontalStackLayout Spacing="10" Padding="2">
                <Label Text="✔" TextColor="#2E7D32" FontSize="20" VerticalOptions="Center" />
                <VerticalStackLayout Spacing="2">
                    <Label Text="Success!" FontAttributes="Bold" TextColor="#2E7D32" />
                    <Label Text="Your message has been sent successfully"
                           TextColor="{AppThemeBinding Light=#333, Dark=#EEE}"
                           MaxLines="2"
                           LineBreakMode="TailTruncation" />
                </VerticalStackLayout>
            </HorizontalStackLayout>
        </DataTemplate>
    </popup:SfPopup.ContentTemplate>
</popup:SfPopup>

Refer to the following image.

3. Action sheet: Contextual actions without navigation

A lightweight surface that displays a small set of actions related to the current context (e.g., file options). It does not navigate to or replace the current page; instead, it presents choices inline and closes after a selection is made.

Use cases

• Ideal for actions like share, copy, and delete.
• Contextual choices that should not take over the screen.

Refer to the following code example.

<popup:SfPopup x:Name="ActionSheetPopup" Grid.Row="8"
                RelativeView="{x:Reference RootLayout}"                               
                IsOpen="{Binding IsActionSheetOpen}"                               
                AnimationMode="SlideOnBottom"
                RelativePosition="{OnPlatform WinUI=AlignTop,MacCatalyst=AlignTop, Android=AlignBottom}"/>

Refer to the following image.

4. Teaching bubble: Just-in-time guidance near a control

A small, anchored tip that provides immediate, contextual guidance without navigation.

Use cases

• Explain new features.
• Provide hints for complex controls.

Refer to the following code example.

<popup:SfPopup x:Name="FormPopup" Grid.Row="8"
        IsOpen="{Binding IsFormOpen}"
        ShowHeader="True"
        HeaderTitle="Create Item"
        ShowFooter="True"
        WidthRequest="360"
        HeightRequest="320"
        StaysOpen="False">
    <popup:SfPopup.ContentTemplate>
        <DataTemplate>
            <VerticalStackLayout Padding="12" Spacing="8" WidthRequest="320">
                <Entry Placeholder="Name" Text="{Binding Name}" />
                <Editor Placeholder="Notes" AutoSize="TextChanges" Text="{Binding Notes}" />
                <DatePicker Date="{Binding Date}" />
            </VerticalStackLayout>
        </DataTemplate>
    </popup:SfPopup.ContentTemplate>
    <popup:SfPopup.FooterTemplate>
        <DataTemplate>
            <Grid Padding="20" ColumnSpacing="8" ColumnDefinitions="Auto, Auto">
                <Button Text="Cancel" Grid.Column="0" Command="{Binding CancelFormCommand}" Style="{StaticResource DeclineButtonStyle}" />
                <Button Text="Save" Grid.Column="1" Command="{Binding SaveFormCommand}" Style="{StaticResource AcceptButtonStyle}" />
            </Grid>
        </DataTemplate>
    </popup:SfPopup.FooterTemplate>
</popup:SfPopup>

Refer to the following image.

5. Form popup: Lightweight data entry without leaving the page

A compact dialog used to collect a few fields, such as Name, Notes, and Date, while staying on the current page. 

Use cases

• Quick create or edit flows.
• Inline data capture.

Refer to the code example given below.

<popup:SfPopup x:Name="FormPopup"
               IsOpen="{Binding IsFormOpen}"
               ShowHeader="True"
               HeaderTitle="Create Item"
               ShowFooter="True"
               WidthRequest="360"
               HeightRequest="320"
               StaysOpen="False">
  <popup:SfPopup.ContentTemplate>
    <DataTemplate>
      <VerticalStackLayout Padding="12" Spacing="8" WidthRequest="320">
        <Entry Placeholder="Name" Text="{Binding Name}" />
        <Editor Placeholder="Notes" AutoSize="TextChanges" Text="{Binding Notes}" />
        <DatePicker Date="{Binding Date}" />
      </VerticalStackLayout>
    </DataTemplate>
  </popup:SfPopup.ContentTemplate>

  <popup:SfPopup.FooterTemplate>
    <DataTemplate>
      <Grid Padding="20" ColumnSpacing="8" ColumnDefinitions="Auto, Auto">
        <Button Text="Cancel"
                Command="{Binding CancelFormCommand}"
                Style="{StaticResource DeclineButtonStyle}" />
        <Button Text="Save"
                Command="{Binding SaveFormCommand}"
                Style="{StaticResource AcceptButtonStyle}" />
      </Grid>
    </DataTemplate>
  </popup:SfPopup.FooterTemplate>
</popup:SfPopup>

Refer to the following image.

6. Full-screen overlay: Critical, must-read interruptions

Blocks the entire viewport and prevents interaction with the underlying UI until acknowledged. Use sparingly for critical notices, consent gates, or system-wide interruptions.

Use cases

• Must-read alerts.
• Session expiry.
• Legal acknowledgements.

Refer to the following code example.

<popup:SfPopup x:Name="FullScreenPopup"
               IsOpen="{Binding IsFullScreenOpen}"
               IsFullScreen="True"
               ShowHeader="False"
               StaysOpen="True"
               ShowFooter="False">
  <popup:SfPopup.ContentTemplate>
    <DataTemplate>
      <Grid BackgroundColor="#88000000" Padding="24">
        <VerticalStackLayout Spacing="16" HorizontalOptions="Center" VerticalOptions="Center">
          <Label Text="Critical notice" TextColor="White" FontAttributes="Bold" FontSize="20" />
          <Label Text="This blocks interaction until acknowledged." TextColor="White" />
          <Button Text="Got it" Command="{Binding DismissFullScreenCommand}" />
        </VerticalStackLayout>
      </Grid>
    </DataTemplate>
  </popup:SfPopup.ContentTemplate>
</popup:SfPopup>

Refer to the following output image.

7. Loading indicator: Short async operations

A compact, non-blocking indicator is displayed while a brief task is running. No extra input is required from the user.

Use case

• Fetch or save operations completed in a few seconds.

Tip: For longer tasks, display progress or provide a cancel action.

Refer to the code example for the implementation of the loading indicator popup.

<popup:SfPopup x:Name="LoadingPopup"
               IsOpen="{Binding IsLoadingOpen}"
               ShowHeader="False"
               AutoSizeMode="Height"
               ShowFooter="False">
  <popup:SfPopup.ContentTemplate>
    <DataTemplate>
      <VerticalStackLayout Padding="20" Spacing="10" WidthRequest="160">
        <ActivityIndicator IsRunning="True" />
        <Label Text="Loading..." HorizontalOptions="Center" />
      </VerticalStackLayout>
    </DataTemplate>
  </popup:SfPopup.ContentTemplate>
</popup:SfPopup>

Refer to the following image.

8. Illustrated confirmation: When consequences need extra clarity

An illustrated confirmation dialog combines text with an image to reinforce context and reduce mistakes. This approach is ideal for actions that are potentially destructive or hard to undo, such as archiving data or disabling features.

Use cases

• Situations where visual emphasis helps users make the right choice.
• Scenarios where brief education reduces user error.

Refer to the following code example.

<popup:SfPopup x:Name="IllustratedConfirm"
               IsOpen="{Binding IsIllustratedOpen}"
               ShowHeader="False"
               ShowFooter="True"
               ShowCloseButton="True"
               AutoSizeMode="Height"
               WidthRequest="360">
  <popup:SfPopup.ContentTemplate>
    <DataTemplate>
      <VerticalStackLayout Padding="12" Spacing="12" WidthRequest="320">
        <Image Source="dotnet_bot.png" WidthRequest="70" HeightRequest="60" />
        <Label Text="You can restore this later from Settings > Archives."
               LineBreakMode="WordWrap" />
      </VerticalStackLayout>
    </DataTemplate>
  </popup:SfPopup.ContentTemplate>

  <popup:SfPopup.FooterTemplate>
    <DataTemplate>
      <Grid Padding="20" ColumnSpacing="12" ColumnDefinitions="Auto, Auto" HorizontalOptions="End">
        <Button Text="Cancel"
                Command="{Binding CancelIllustratedCommand}"
                Style="{StaticResource DeclineButtonStyle}" />
        <Button Text="Archive"
                Command="{Binding ConfirmIllustratedCommand}"
                Style="{StaticResource AcceptButtonStyle}" />
      </Grid>
    </DataTemplate>
  </popup:SfPopup.FooterTemplate>
</popup:SfPopup>

Refer to the following output image.

GitHub reference

For more details, refer to the popup patterns in the .NET MAUI Popup control GitHub demo.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Try It Free

Conclusion

Thanks for reading! Popups are not just visual elements—they’re strategic components that shape how users interact with your app. When implemented thoughtfully, they provide clarity, reduce friction, and create a more intuitive experience across mobile and desktop platforms. From quick confirmations to critical alerts and contextual guidance, choosing the right popup pattern is key to delivering a seamless UX.

👉 Ready to elevate your app’s UX? Download Syncfusion .NET MAUI Popup control and start building polished, interactive experiences today!

Also, explore more in our .NET MAUI controls and demos on GitHub and share your feedback or questions in the comments. We’d love to hear from you!

If you’re a Syncfusion user, you can download the latest setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!