Notification - a printed matter that gives notice regarding any action. Usually, it is a short text with information or error displayed in the block, which can be hidden manually or disappear in 5 seconds.

Where this element can be seen?

This element can be seen across the whole site after performing certain actions in the right top corner on the desktop or on the top in full width on mobile. Usually, these actions are:

• Authorization
• Wrong input, validation errors
• Add to cart action etc.

How should this element be designed?

<aside> ➡️ Notifications in ScandiPWA have the following types:

• Error notification
• Info notification. Consider making this not-so-bright, it is not a warning
• Success notification </aside>

The notification should be displayed in the following state:

• Default state
• Hovered/focused state (when user want to dismiss it)

<aside> ℹ️ Usually, styling this element takes from-to: 2-3h

</aside>

An example display of the notifications element

How the design may look like?

How to develop styles for this element?

Notifications are rendered by the Notification component. You can extend or override this component's styles to customize the look of Notifications:

scandipwa override component Notification

How the implementation may look like?

Implementation Example #1

Implementation Example #2