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
| Component | Plan | What it is for | Settings you can change |
|---|---|---|---|
| Toast Notification | Free | A card with an emoji, a title, a message and an Undo button that slides in and closes itself after three seconds | Icon/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 Notification | Paid | A two-line card with a green check badge that stays until the X is clicked | Primary Text; Secondary Text; Notification Position |
| Notification with Timer | Paid | The two-line card with a shrinking progress bar that closes itself after the set time | Primary Text; Secondary Text; Auto-Hide Duration (milliseconds) with Quick Duration Presets of 2s, 3s, 5s and 10s; Notification Position |
| Status Notifications | Paid | A one-line card with a green, red or orange icon in a tinted circle that stays until the X is clicked | Notification Type: Success (Checkmark), Error/Delete (X) or Warning (Triangle); Notification Text; Notification Position |
| Queue Notifications | Paid | Several one-line cards stacked top right, each with its own timer and X | Button 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
btnUndoon Toast Notification only closes the card: its OnSelect isUpdateContext({ 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:
icoToastgets a literal Icon.Check, Icon.Cancel or Icon.Warning andconItemToasta 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 theAutoClosetimer with your Auto-Hide Duration, andconProgressBarshrinks 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 lineTimer(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.
Related
Open the family in the library at Toast. Related guides: Modals and Badge.