Skip to content

Toast Notifications for Power Apps

A toast is a small card that appears in a corner after something happens, such as a record being saved, and goes away on its own or when the user closes it. Power Apps has Notify() for a plain banner at the top; reach for these when you want a card in a corner with your own text, icon, timing and position. Every variant pastes with a demo button that shows the toast. Toast Notification is free; the other variants need a Components, Ultra, Team or Lifetime plan, and editing the Settings tab needs Ultra, Team or Lifetime.

Pick a variant

ComponentPlanWhat it is forSettings you can change
Toast NotificationFreeA card with an emoji, a title, a message and an Undo button that slides in and closes itself after three secondsIcon/Emoji (None or one of the fixed emoji); Toast Title; Toast Message; Action Button Text, which labels the demo button, not the Undo button; Animated Slide in Effect; Notification Position (click a corner: Top Left, Top Right, Bottom Left, Bottom Right)
Simple NotificationPaidA two-line card with a green check badge that stays until the X is clickedPrimary Text; Secondary Text; Notification Position
Notification with TimerPaidThe two-line card with a shrinking progress bar that closes itself after the set timePrimary Text; Secondary Text; Auto-Hide Duration (milliseconds) with Quick Duration Presets of 2s, 3s, 5s and 10s; Notification Position
Status NotificationsPaidA one-line card with a green, red or orange icon in a tinted circle that stays until the X is clickedNotification Type: Success (Checkmark), Error/Delete (X) or Warning (Triangle); Notification Text; Notification Position
Queue NotificationsPaidSeveral one-line cards stacked top right, each with its own timer and XButton Text; Notification Message; Auto-dismiss Duration (milliseconds) with Quick Duration Presets; no position setting, always top right

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Open the category in the library: Toast.

To copy a variant into Power Apps Studio, follow Getting Started.

After you paste

Simple Notification, Notification with Timer and Status Notifications share one pattern: the demo button btnNotification runs Set(varPowerLibsNotification, true), the card conNotification has Visible set to that global variable, and the X icon icoCancel sets it back to false. Toast Notification with the slide effect on is different: conToast is visible while the context variable ShowHideToast is true, timerAnimation slides it in, and timerCloseToast hides it after 3 seconds. Queue Notifications keeps a collection colNotifications shown by the gallery galNotifications; each row carries its own timer NotificationItem that removes it. Once your own controls fire the toast, delete the demo button. The btn, con, ico, lbl and gal prefixes come from your project settings.

Put this in the OnSelect property of your own button, after your Patch or SubmitForm, for Simple Notification, Notification with Timer or Status Notifications:

Set(varPowerLibsNotification, true)

Put this in the OnSelect property of your own button for Toast Notification with Animated Slide in Effect on. It is the demo button's formula with the last line forced to true:

Reset(timerAnimation);
UpdateContext({StartTimer: false});
UpdateContext({StartTimer: true});
UpdateContext({ShowHideToast: true})

Put this in the OnSelect property of any control to add a card to Queue Notifications. ID, Message, Timestamp and Show are the columns the gallery expects:

Collect(colNotifications, {
    ID: GUID(),
    Message: "Item added to the cart",
    Timestamp: Now(),
    Show: true
})

Good to know

  • The Undo button btnUndo on Toast Notification only closes the card: its OnSelect is UpdateContext({ ShowHideToast: false }). Put your undo logic, such as a Patch, before that line. Its label has no Settings field; change its Text property in Power Apps Studio.
  • Status Notifications bakes the type into the YAML: icoToast gets a literal Icon.Check, Icon.Cancel or Icon.Warning and conItemToast a literal fill. No variable switches the type at run time, so paste one copy per type or edit those two properties.
  • Auto-hide is fixed at 3 seconds on Toast Notification (timerCloseToast, Duration 3000). Notification with Timer uses the AutoClose timer with your Auto-Hide Duration, and conProgressBar shrinks as it counts down. Simple Notification and Status Notifications stay until the X is clicked.
  • With Animated Slide in Effect switched off, Toast Notification becomes an older build: fixed names ToastContainer, ShowToastButton, ToastActionButton and ToastCloseButton without your prefixes, a global variable ToastVisible, and a line Timer(4000, Set(ToastVisible, false)) in the demo button that is not a Power Fx function. Delete that line if you use the static card.
  • The card's place in the Tree view decides what it covers, so keep it above your galleries. The light and dark toggle in the component header changes only Simple Notification and Queue Notifications; the other cards stay white. The brand color paints the progress bar and the demo buttons of Simple Notification, Notification with Timer and Status Notifications; the animated Toast Notification button is black and the Queue button a fixed blue. No toast offers Modern YAML.

Open the family in the library at Toast. Related guides: Modals and Badge.

Toast Notifications for Power Apps | PowerLibs