Notifications
In contrast to dialogues, which can interrupt user activities, notifications deliver timely feedback while maintaining the user’s primary flow.
For information on messages that do interrupt the user experience, see the section on Dialogues.
Aios utilises two main types of notifications: In-app Notifications and Push Notifications.
Badges
Badges are small indicators used to signal the presence of new information or updates, such as unread messages or notifications.
They draw attention without blocking the user's view or demanding immediate action.
Badges typically appear on icons or labels, positioned at the upper right corner within the icon's bounding box
In Aios development, ticket requirements will specify:
- whether to use a dot badge or a number badge
- whether to use a green, amber or red badge
- the badge placement (which component it is associated with, such as the Referral Management section or the main application desktop icon)
When a component has several unread notifications, only one badge will be displayed. This badge will use the colour that represents the highest priority (for example, red over amber) and will show the total number of notifications for that component.
Dot Badges: Indicate status with a simple dot, without any accompanying text.
Number Badges: Display counts, such as the number of notifications or items, with a limit of four characters, including a “+” if necessary.
CSS Properties
/*PUSH NOTIFICATIONS*/
.push {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
min-height: 60px;
max-height: 150px;
background-color: var(--PrussianBlue-d);
border-radius: 10px;
padding: 15px;
box-shadow: 0px 3px 6px rgba(0,0,0, 0.15);
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
display: flex;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
}
.push-header {
display: flex;
width: 100%;
margin-bottom: 10px;
}
.push img {
width: 22px;
height: auto;
margin-right: 10px;
}
.push .banner-close {
position: absolute;
top: 25px;
font-size: 22px;
}
.push-title {
color: white;
font-size: 14px;
font-family: var(--base-font-family);
font-weight: 400;
margin: 0;
}
.push-content {
color: white;
font-size: 14px;
margin: 0;
padding-left: 5px;
padding-right: 5px;
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
.push.show {
transform: translateX(0%);
opacity: 1;
visibility: visible;
}
.push.hide {
transform: translateX(100%);
opacity: 0;
visibility: hidden;
}
/*TOASTERS*/
.toaster {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
background-color: white;
border-radius: 10px;
border: 1px solid;
border-left: 4px solid;
padding: 10px;
box-shadow: 0px 3px 6px rgba(0,0,0, 0.15);
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
overflow: hidden;
}
.toaster-timer {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background: var(--Grey-l);
transition: background-color 3s linear;
}
.toaster.show {
transform: translateX(0%);
opacity: 1;
visibility: visible;
}
.toaster.hide {
transform: translateX(100%);
opacity: 0;
visibility: hidden;
}
.toaster .success-icon,
.toaster .warning-icon-amber,
.toaster .error-icon,
.toaster .information-icon {
font-size: 18px;
position: absolute;
align-self: center;
}
.toaster .banner-close {
top: 20px;
right: 0;
position: absolute;
font-size: 24px;
}
.toaster-title {
color: #000000;
font-size: 14px;
font-family: var(--base-font-family);
font-weight: 600;
margin: 0 5px 5px 25px;
}
.toaster-content {
margin: 0 ;
padding-left: 5px;
font-size: 14px;
}
/* Toaster Variants */
.toaster.success {
border-color: var(--Green);
}
.toaster.warning {
border-color: var(--Yellow);
}
.toaster.error {
border-color: var(--Red);
}
.toaster.info {
border-color: var(--MidBlue);
}
/*BADGES*/
/*Use Google Material Components if possible*/
/*Containers*/
.icon-badge-container {
position: relative;
display: inline-block;
height: 32px;
width: 32px;
}
/*Dot Badges*/
.dot-badge-green,
.dot-badge-amber,
.dot-badge-red {
height: 8px;
width: 8px;
border-radius: 8px;
border: 1px solid white;
position: absolute;
top: 0;
right: 0;
z-index: 99999;
}
.dot-badge-green {
background-color: var(--Green);
}
.dot-badge-amber {
background-color: var(--Yellow);
}
.dot-badge-red {
background-color: var(--Red);
}
/*Number Badges*/
/*small = just one character*/
.nr-badge-small-green,
.nr-badge-small-amber,
.nr-badge-small-red {
height: 16px;
width: 16px;
border-radius: 16px;
border: 1px solid white;
position: absolute;
top: -4px;
right: -4px;
font-size: 11px;
font-family: Arial;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
line-height: 16px;
text-align: center;
text-justify: center;
z-index: 5;
}
.nr-badge-small-green {
background-color: var(--Green);
color: #000000;
}
.nr-badge-small-amber {
background-color: var(--Yellow);
color: #000000;
}
.nr-badge-small-red {
background-color: var(--Red);
color: white;
}
/*large = more than one character*/
.nr-badge-large-green,
.nr-badge-large-amber,
.nr-badge-large-red {
height: 16px;
border-radius: 16px;
border: 1px solid white;
padding: 0px 4px;
position: absolute;
top: -5px;
right: -5px;
font-size: 11px;
font-family: Arial;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
line-height: 16px;
text-align: center;
text-justify: center;
z-index: 5;
}
.nr-badge-large-green {
background-color: var(--Green);
color: #000000;
}
.nr-badge-large-amber {
background-color: var(--Yellow);
color: #000000;
}
.nr-badge-large-red {
background-color: var(--Red);
color: white;
}
Risk Assessment Categorisation
For Pathways only
Consider the traffic light system for badge colours. In summary:
- Green generally indicates a positive status or available state. In medical use it is also used for non-critical alerts
- Amber generally indicates a warning or pending state. In medical contexts, this color is used for alerts that need attention but are not critical, such as waiting for a response or needing action soon.
- Red generally indicates an error or critical status. In medical contexts, this color is used for critical alerts that require immediate attention, such as errors, critical warnings, or urgent notifications.
| Clinical Warning Classification | Consequence/Severity | ||||
|---|---|---|---|---|---|
| Insignificant (1) | Minor (2) | Moderate (3) | Major (4) | Catastrophic (5) | |
| Information (i) | Low | Low | Low | Moderate | Moderate |
| Caution (c) | Low | Low | Moderate | Moderate | Moderate |
| Warning (w) | Low | Moderate | Moderate | Moderate | High |
| Severe (s) | Moderate | Moderate | High | High | Critical |
| Urgent (u) | High | High | High | Critical | Critical |
In-app Notifications
Toaster messages are unobtrusive notifications that briefly appear within the app interface to to provide feedback without demanding immediate interaction.
- Positioned at the bottom corner of the interface
- When multiple toaster messages are displayed simultaneously, they stack vertically to avoid overlapping
- Automatically fade out after a short period, ensuring that they do not distract the user for too long
- Each toaster features a timer that indicates how long the message will remain visible before it automatically disappears.
- Additionally, each toaster message includes a close button, allowing users to dismiss the message manually at any time.
Success
Your action was successful.
Warning
Please check the details.
Error
An error occured.
Information
Here is some information.
Push Notifications
Push Notifications are messages that appear even when you are not actively using the app. They are designed to capture the user's attention by providing timely information or updates.
- Displayed on the device's notification center, ensuring visibility regardless of app activity
- Can include text, images, or interactive elements to engage users and prompt action, such as allowing users to respond to a message
- Require user permission to be enabled, and can be customised or controlled via device settings
- When multiple notifications are received, they are usually grouped or stacked
