Maturity
This is a work in progress documentation. Please provide feedback here.
Overview
Notifications are communication tools that automatically reveal to provide persistent feedback on a system message or an outcome for a process in the background. Due to their intrusive nature, Notifications should only be used sparingly for specific use cases such as:
- Providing system feedback
- Errors and warnings that affect the whole platform's performance
- Neutral messages related to the platform
- Offering feedback on long-term processes
- System error feedback for unsuccessful processes, where retry action could live inside the Alert.
- Confirmation feedback for successful processes on the background where there are additional actions.
In each case, the Notifications will persist until dismissed or until the issue causing it is resolved. Longer messages may be necessary, to provide context and explain the situation properly in cases where the customer might have navigated to a different section, as they follow the user as they navigate from page to page.
-
FYQ2 target
-
Figma component
-
Repository
-
Storybook
-
Anatomy
Notifications are composed of an icon, a heading, a description and a dismiss icon. They hold a set of actions and link combinations:
- Single Action Button
- Single Link
- Action Button + Action button
- Action button + Link
Properties
|
NAME |
VALUES |
DEFAULT |
|---|---|---|
|
Action |
Boolean |
False |
How to use
Sentiment
Semantic signifiers are intended to draw attention to essential experience elements and, through specific sentiments, assign them a particular meaning that facilitates their differentiation. In the case of notifications, just the icon is combined with a specific color sentiment.
More details
Critical
A critical or unexpected situation
When to use
- Something’s not working and requires immediate action because of its importance and severity; regardless if it’s a person’s error or a system error.
- A problem happened, or a person made a mistake that prevented them from finishing their task or a process.
- Indicate actions that are destructive and can’t be undone—they require confirmation.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
- "We’ve got a problem, and we need to act now."
Warning
Cautionary advice about a potential problem
When to use
Informs about/indicates an action that can be taken to prevent errors or unwanted things from happening.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
- "We’re letting you know about a potential problem."
- "Unverified"
Success
Achievement of a goal
When to use
When things are done or went accordingly to plan.
Purpose
Inform about success.
Example
- "This is done; everything went well."
- "Enabled"
Featured
Highlighted for special attention, neither good nor bad
When to use
Provides valuable information to people about something important or out of the ordinary, essential to understand the context and making a decision.
Purpose
Neutrally inform people.
Example
- "We’re letting you know about…"
- "New"
- "Beta"
- "AI"
Heading
Headings indicate the highest levels of the information hierarchy. They emphasize the essential information in the experience to make it easy to scan the content. For notifications, headers should give a concise explanation of what happened or is happening in the background since users are likely to just glance over it without reading the whole text.
Description
Descriptions provide the necessary context, the might also indicate either the benefit of that action happening or the steps needed to solve a potential problem. They should say only what is necessary for users at that time.
More details
Background processes
We define background processes as the ones that, from the user's standpoint, do not occur instantaneously. Sometimes, users may trigger an action that requires a significant amount of time to complete. However, once the action is finished, the user is promptly notified of the outcome.
System communications
These messages are system-generated and do not require any user interaction to initiate.
Actions and links
Notifications hold optional actions and links for the following scenarios.
Single Action Button
Highlights the crucial action that users can take to address the feedback effectively.
Action button + Action Button
While the first action covers similar scenarios as a single action, the second action aims to complement with related actions.
Single Link
As a general rule, links are primarily used to redirect users to another location. In the context of isolated links, they serve to expand the information presented in the notification when no specific action is required.
Action Button + Link
This combination includes a main action that corresponds to the message's objective, accompanied by a Link to provide further information and amplify the notification's content
Sizing and spacing
We use standard sizing and spacing to improve the experience depending on the information density and make our interface more accessible, predictable, and easy to use.
Related content
Width
Notifications hold a fixed 320px width. When the text content reaches that limit, breaks into lines, without limit.
Height
Height is flexible, allowing the content inside the container to grow without blockers.
Grouped notifications
When multiple notification stack, they showcase separated by a SM spacing.
Behavior
Notifications reveal on the top right area of the screen, just below the Page Header and overlapping Content. They persist until dismissed, following users through pages.
When new notifications come in, they reveal stacked from top to bottom.
If notifications overflow the viewport, they become scrollable, independently of the rest of the page content.
