Notification

Notification is a component that provides the user with relevant information and updates about the outcome of an action they have taken.

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Principles

Employ the notification component to engage users with timely, relevant updates or alerts. It's ideal for drawing attention to new activities, messages, or status changes within the application.

Utilize notifications to convey information that requires immediate attention or action from the user.

Avoid using the notification component for information that is not crucial or does not require immediate action.

Toast	Toast is for instant notification when an action is completed, failed, etc.
Line	Line is used for conveying meanings in inline form inputs.
App	App is for critical system, product updates or warnings on components.

Information	It is used for general information or interactions.
Success	It is for actions with positive meanings: completed, in progress, successful.
Warning	It is used when the context indicates that the action or message requires immediate attention.
Error	It is used when the context needs to convey that the action is destructive, error, or dangerous.

Icon	Icon is for strengthening the message giving its semantic icon.
Dismiss button	When notifications are not required to close in mandatory conditions.

Notification visibility

Toast notifications can be set to disappear after a certain time, if not critical.

While using toast or app notifications that are critical, they should remain visible until the user acknowledges them.

Frame Design System from Mikrogrup