Porsche Design System Search Navigate to GitHub repository of Porsche Design System Open sidebar prev nextIntroduction Decision Tree Notifications
Table of Contents
Decision Tree#
The decision tree can guide you when to use which notification component. First, walk through the four cases and pick
the one that represents your case the best. From there, a few simple questions will lead you to the recommended
component for your notification.
Provide additional information for a task, a status, or their current action.#
Status: Neutral
Example use Cases:
Ask for User data
Request feedback
Validation code was sent to phone
We sent you an email
Related Components:
Inline Notification
Modal
Toast
Confirm a task was completed as expected.#
Status: Success
Example use Cases:
From submit was successful
Selection made is approved
Changes are saved/made/applied successfully
An Upload was successful
A request was submitted successfully
Related Components:
Inline Notification
Inline Validation (supported by all form elements)
Toast
Inform/confirm that the user is taking actions or an event occurs that is not desirable or might have effects - variant 1.#
Status: Warning
Example use Cases:
The user’s login session is about to expire
Planned system maintenance is coming soon
About to leave the system
About to delete a vehicle or user data
Related Components:
Banner
Inline Notification
Modal
Inform/confirm that the user is taking actions or an event occurs that is not desirable or might have effects - variant 2.#
Status: Error
Example use Cases:
Internet connection lost
Form submit error (mandatory fields missing)
Wrong input format
Credentials can't be found
Feedback Page (Success / Error)
There is a problem uploading a file
Related Components:
Banner
Inline Notification
Inline Validation (supported by all form elements)
Modal
Global settingsTheme
ThemeMore information Changes the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark . It's also possible to use auto , which applies light or dark theme depending on the operating system settings automatically. // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
Light// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
Dark// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
Auto (sync with operating system)DirectionMore information Changes the direction of HTML elements, mostly used on<html>
tag to support languages which are read from right to left like e.g. Arabic. // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
LTR (left-to-right)// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
RTL (right-to-left)// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
AutoText ZoomMore information Changes the text size and values with unit rem
or em
relatively. This setting can be defined in browser settings for any website or by an application itself on<html>
tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%. // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
100%// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
130%// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
150%// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
200%