The brand
SBB Brand portal
Logo
Digital clock
Rights of useColors
Base colors
Functional colors
Off brand colorsAssets
Icons
Timetable icons
Pictograms
Introduction
About accessibility
Über diesen Guide
Contact
Further informationAccessibility by roles
Product Owner
User Research
Interaction Design
Visual Design
Development
Content Design
Testing
First steps
What is a design system?
Designing
Coding
FAQ
HelpOrganisation
Process
Contribution
ContactMobile
Overview
Base
ComponentsLyne
Overview
Releases
Design Tokens
KomponentenMaps
Overview
Base
InformationenLean (Legacy)
Overview
Base
ComponentsCommunity Assets
Sense & Purpose
Community Assets
Instructions
Guides
Power-Apps
Digital banner ads
SAP Design GuidelinesRegulations
App Icons
Modal view
Overview
What does the component do?
It dims the current view and puts a modal dialogue over it.
When should the component be used?
When the user’s attention is required.
When information/input is required from the user.
When related content is to be displayed.
When additional content is to be displayed.
The component is not suitable for error messages, warnings or similar notifications.
Rules
The user must always have the option of closing the modal dialogue.
Any modal dialogue consists of a header (close icon and title) and content.
The content must contain at least an interaction element (e.g. ‘save’ or ‘OK’).
The modal dialogue cannot be used for error messages.
The width and height of the dialogue is determined by the size of the content.
A minimum space from the screen edge must be kept.
The modal dialogue is closed if the dimmed section is clicked on.
If the content is too big, a full-screen modal dialogue can be selected: see page types.
Accessibility
Content outside the open dialog should no longer be accessible via screen reader.