Temporary notification
A notification that appears at the bottom of the screen.
Props
message
string
The notification message text to display.
type
TemporaryNotificationType
The notification type which determines the visual style and icon.
Defaults to
basic.
progress
number
Progress value from 0-100. Use -1 to hide the progress bar. Only applies when type is "progress".
Defaults to
-1.
testId
string
Sets a data-testid attribute for automated testing.
actionText
string
Text for the optional action button. When provided, displays a clickable link button.
visible
boolean
Controls whether the notification is visible.
Defaults to
true.
animationDirection
TemporaryNotificationAnimationDirection
Direction the notification animates from when appearing or disappearing.
Defaults to
down.
Show a notification
const save = async () => {
// await api.save();
TemporaryNotification.show("Your application has been saved.", {
type: "success"
});
};<GoabTemporaryNotificationCtrl />
<GoabButton type="secondary" onClick={save}>Save</GoabButton>Show a notification with an action
const comment = () => {
const uuid = TemporaryNotification.show(
"Edna Mode commented on your assigned case.",
{
actionText: "View",
action: () => {
TemporaryNotification.dismiss(uuid);
}
}
);
};<GoabTemporaryNotificationCtrl />
<GoabButton onClick={comment}>Comment</GoabButton>Show a user progress
const sendApi = (
progressCallback: (progress: number) => void,
isCancelledRef: { current: boolean }
) => {
return new Promise((resolve, reject) => {
let progress = 0;
const interval = setInterval(() => {
if (isCancelledRef.current) {
clearInterval(interval);
reject("cancelled");
return;
}
progress += 5;
progressCallback(progress);
if (progress >= 100) {
clearInterval(interval);
resolve("success");
}
}, 200);
});
};
const downloadReport = () => {
const isCancelledRef = { current: false };
const uuid = TemporaryNotification.show("Downloading report D-23459", {
type: "progress",
actionText: "Cancel",
action: () => {
isCancelledRef.current = true;
TemporaryNotification.dismiss(uuid);
console.log("Download cancelled");
},
});
TemporaryNotification.setProgress(uuid, 0);
const updateProgress = (progress: number) => {
TemporaryNotification.setProgress(uuid, progress);
if (progress >= 100) {
setTimeout(() => {
TemporaryNotification.show("Report downloaded", {
type: "success",
duration: "medium",
actionText: "View",
action: () => {
console.log("View report clicked!");
},
cancelUUID: uuid,
});
}, 300);
}
};
sendApi(updateProgress, isCancelledRef).catch((error) => {
if (error !== "cancelled") {
TemporaryNotification.dismiss(uuid);
}
});
};<GoabTemporaryNotificationCtrl />
<GoabButton type="tertiary" leadingIcon="download" onClick={downloadReport}>
Download report
</GoabButton>Show a user progress when the time is unknown
const searchCMS = async (): Promise<Error | undefined> => {
// Perform your API call here
await new Promise((resolve) => setTimeout(resolve, 3000));
return undefined;
};
const search = async () => {
const uuid = TemporaryNotification.show("Searching case management system...", {
type: "indeterminate",
actionText: "Cancel",
action: () => {
TemporaryNotification.dismiss(uuid);
},
});
const err = await searchCMS();
if (err) {
TemporaryNotification.show("Could not connect to case history", {
type: "failure",
duration: "medium",
cancelUUID: uuid,
});
} else {
TemporaryNotification.show("Search complete - 47 records found", {
type: "success",
duration: "medium",
actionText: "View",
action: () => {
console.log("View search results clicked!");
},
cancelUUID: uuid,
});
}
};<GoabTemporaryNotificationCtrl />
<GoabButton type="secondary" leadingIcon="search" onClick={search}>
Search case history
</GoabButton>