Notifications
A NotificationArea fills its parent and stacks toast bubbles in one corner. Each workspace has one, created on first use:
Video tutorial: Notifications. All videos: Video tutorials.
workspace.Notifications.Show("Layout saved", Severity.Success);
var bubble = workspace.Notifications.Show("Connection lost", Severity.Error, durationMs: 0);
bubble.Title = "Network";
bubble.AddAction("Retry", Reconnect);
bubble.Clicked += _ => OpenLog();
Outside a workspace, add an area yourself:
<UIToolbox.NotificationArea name="toasts" corner="BottomRight" max-visible="3" stack-duplicates="true" />
In the UI Builder, the area shows a dashed outline with its name, so you can find it. The outline does not show in Play mode or in a build.
| Member | Description |
|---|---|
NotificationArea.Show(message, severity, durationMs) |
Adds a bubble and returns it. The message is rich text. |
NotificationArea.Show(bubble) |
Adds a bubble that you built. |
NotificationArea.ShowTask(task, loading, success, error) |
Adds a loading bubble for a Task and returns it. See "Show a task" below. |
NotificationArea.Corner (corner) |
TopRight (default), TopLeft, BottomRight, BottomLeft, TopCenter or BottomCenter. |
NotificationArea.MaxVisible (max-visible) |
Most bubbles at once (5). Above it a new bubble waits in the queue. |
NotificationArea.Queue (queue) |
Keeps the bubbles above MaxVisible in a queue (true). A waiting bubble shows when a shown bubble leaves, and its timer starts then. false dismisses the oldest bubbles to make room. |
NotificationArea.StackDuplicates (stack-duplicates) |
Shows equal messages as one bubble with a count (false). Show adds to Count of a bubble with the same message, title and severity, starts its countdown again and returns that bubble. |
NotificationArea.ShowProgress (show-progress) |
Shows the countdown bar on each bubble (true). |
NotificationArea.SlideBubbles (slide-bubbles) |
The bubbles slide to their new places when a bubble comes, goes or changes its height (true). false makes them jump. |
NotificationArea.QueuedCount |
The bubbles that wait in the queue. |
NotificationArea.DismissAll() |
Dismisses every bubble, also the bubbles in the queue. |
NotificationBubble.Title (title) |
A bold line above the message. Empty (default) shows no line. |
NotificationBubble.Message (message) |
The message (rich text). |
NotificationBubble.Icon |
An image before the text, as a Background (a texture, a sprite or a vector image). null (default) shows no image. |
NotificationBubble.Severity (severity) |
Info (default), Success, Warning or Error. |
NotificationBubble.DurationMs (duration) |
Milliseconds of game time before the bubble dismisses itself (5000). The countdown stops while Time.timeScale is 0. 0 or less keeps it until the user closes it. |
NotificationBubble.RemainingMs |
Milliseconds until the bubble dismisses itself. |
NotificationBubble.Loading (loading) |
Shows a spinner before the text (false). A loading bubble does not dismiss itself. |
NotificationBubble.Count |
The number of equal messages that the bubble stands for (1). Above 1 the bubble shows it as "x3". |
NotificationBubble.ShowProgress |
Shows the countdown bar on this bubble. null (default) uses ShowProgress of the area. |
NotificationBubble.Closable (closable) |
Shows the close button (true). |
NotificationBubble.AddAction(text, callback) |
Adds a button. A click runs the callback, then dismisses the bubble. |
NotificationBubble.Detail (detail) |
More text under the message (rich text). It shows while the pointer is on the bubble. A bubble with a detail shows "..." under the message until then. |
NotificationBubble.Expanded |
Shows the detail from code. The pointer sets it on enter and clears it on leave. |
NotificationBubble.Dismiss() |
Plays the exit animation, then removes the bubble. |
NotificationBubble.Clicked |
Raised on a click outside the buttons, and on Submit when the bubble has the focus. |
NotificationBubble.Dismissed |
Raised after the bubble leaves the hierarchy. |
- The countdown pauses while the pointer is on the bubble. It continues from the same time when the pointer leaves.
- A change of the message, the title, the severity or the duration of a shown bubble starts the countdown again.
- The countdown bar is on the bottom edge, in the color of the severity. It shrinks from the full width to nothing, and it pauses with the countdown.
- A bubble that does not dismiss itself (a duration of 0, or a loading bubble) has no bar.
- The countdown uses real time, so it also runs in a paused game.
- The area ignores the pointer, so the workspace under it still takes clicks.
Showbrings the area to the front of its siblings, so bubbles show above windows.
Update a shown bubble
Keep the bubble that Show returns and set its properties. The bubble changes in place and its countdown starts again.
var bubble = workspace.Notifications.Show("3 files left");
// Later
bubble.Message = "2 files left";
bubble.Severity = Severity.Warning;
Show a task
ShowTask shows a loading bubble while a task runs. When the task ends, the same bubble changes to a success or to an error, and then dismisses itself.
workspace.Notifications.ShowTask(SaveAsync(), "Saving...", "Saved", "Cannot save");
// The success message from the result of the task
workspace.Notifications.ShowTask(LoadAsync(), "Loading...", (int count) => $"{count} items loaded", "Cannot load");
- An error bubble has the message of the exception as its detail.
- A canceled task dismisses the bubble.
To control the bubble yourself, set Loading and clear it when the work ends:
var bubble = workspace.Notifications.Show(new NotificationBubble { Message = "Connecting...", Loading = true });
// Later
bubble.Message = "Connected";
bubble.Severity = Severity.Success;
bubble.Loading = false;
Open a window on click
Clicked is raised on a click on the bubble, not on its close button or its action buttons. OpenWindow opens the window, or focuses it when it is open.
var bubble = workspace.Notifications.Show("New message: click to open");
// Keyboard and gamepad users can move to the bubble and press Submit
bubble.focusable = true;
bubble.Clicked += clicked =>
{
workspace.OpenWindow("chat");
clicked.Dismiss();
};
Show a pickup in a game
Give each pickup an icon and a count. With stack-duplicates, a pickup with the same message adds its count to the bubble that shows, so ten pickups of wood show as one "Wood x10" line.
<tb:NotificationArea name="feed" corner="BottomLeft" stack-duplicates="true" show-progress="false" queue="false" />
feed.Show(new NotificationBubble
{
Message = "Wood",
Count = amount,
Icon = Background.FromTexture2D(woodIcon),
Severity = Severity.Success,
DurationMs = 2500,
Closable = false,
});
queue="false"drops the oldest pickup when the feed is full, so a new pickup never waits.- For only the icon and the text, give the bubble no background and no border in USS. The
Gatheringexample scene has a panel look and this plain look, a quest bubble and a "Backpack full" bubble that stays until the player sells.
Tips
- Use a title for the source of the message, and the detail for text that most users do not need.
- Use
durationMs: 0for an error that the user must see. - Turn the countdown bar on when the bubbles have actions, so the user sees how much time is left.
Styling
The rules are in Assets/UIToolbox/Runtime/Resources/UIToolbox/Styles/Controls.uss.
| Class | Element |
|---|---|
tb-notification-area |
The overlay. Modifiers: --top-right, --top-left, --bottom-right, --bottom-left, --top-center, --bottom-center. |
tb-notification |
One bubble. Modifiers: --info, --success, --warning, --error. |
tb-notification__body, __title, __message, __actions, __action, __close |
Parts of a bubble. |
tb-notification__detail, tb-notification__more |
The detail text (muted, small, hidden) and the "..." mark. |
tb-notification__icon |
The image of Icon (32 x 32 pixels). |
tb-notification__count |
The count of equal messages, as "x3". |
tb-notification__spinner |
The spinner of a loading bubble (a ProgressRing). |
tb-notification__progress |
The countdown bar. |
tb-notification--loading |
State class: the bubble shows the spinner. |
tb-notification--expanded |
State class: shows the detail and hides the mark. |
tb-notification--hidden |
State class: where the enter animation starts and the exit animation ends. |
tb-notification--anim-in, tb-notification--anim-out |
Transition classes for the enter and exit animations. |
tb-notification--slide |
Transition class: the bubble slides to its new place when a bubble before it comes, goes or changes its height. |