We recommend these usage guidelines, so users can effectively deploy notifications that enhance communication, provide clarity, and improve overall user experience. Each type of notification serves a specific purpose, ensuring users receive the right information at the right time.
Info (blue)
Use info notifications to inform users about updates that do not require immediate action, such as new features, scheduled maintenance, or tips to enhance their experience. Avoid overloading users with info notifications to prevent desensitization.
Example: “My Swisscom was updated to the latest version. Learn more about the changes.”
Confirmation (green)
Use confirmation notifications to reassure users when a task has been completed successfully, such as form submissions, data saved, or the completion of a transaction. Reinforce positive user behavior by showing these notifications immediately after the successful completion.
Example: “Your payment was processed successfully. Thank you for your purchase!”
Warning (yellow)
Use warning notifications to prepare users for significant system changes, potential consequences of actions, or reminders of tasks that need attention. Ensure the warning is providing clear instructions if action is needed.
Example: “Your subscription has been paused. Please update your payment information to continue service.”
Error (orange)
Use error notifications when user actions cannot be fulfilled due to system failures, invalid inputs, or connectivity issues. Communicate clearly why the error occurred and provide steps to resolve the issue or retry the action.
Example: “An error occurred while processing your request. Please try again later or contact support.”
Notification types
Toasts
Toasts are compact, temporary notifications that appear briefly to confirm an action or surface a time-sensitive message. Use them for feedback that's relevant to a specific user actio, e.g. a success info, a failed upload, or a quick warning. The message should be self-explanatory and require no further interaction. Because of their small footprint, they're best suited for single-line messages that don't demand a decision from the user.
Header notification
Header notifications span the full width of the interface, making them the right choice when a message is relevant to the entire session or product context and not just a single action. Use them for system-wide information that all users need to be aware of, such as scheduled maintenance, service disruptions, or important product updates. Their persistent, prominent placement ensures the message stays visible until it's been acknowledged or resolved.
Modal notification
Modal notifications are large screen takeovers featuring messaging and iconography that intentionally interrupt the users experience, usually require an action from the user in order to progress to the next stage in an experience, or because the notification is of particular significance.
Modal notifications can be displayed using <sdx-dialog notification-type="general" />. There are three notification types available general, confirmation and warning .
More details can be found on the sdx-dialog API. More information about accessibility can be found here.
Card notification
Card notifications are embedded directly within the content flow, making them the right choice when the triggering event has already occurred before the user arrives on the screen. Rather than interrupting with an overlay, they guide the user's attention naturally to where it matters most. Use them when the notification has a direct impact on how the user should navigate or interact with the surrounding content. Such as a status update that affects the next steps in a flow, or a contextual warning tied to a specific section of the page.
Borderless notification
In rare cases, where you want to use notifications to provide light-weighted feedback for the user and use a whole screen for this (e.g. confirmation screen), you can use borderless notifications without the container, embedded within the content of the screen.