General guidelines
A modal bottom sheet must be used to help the user to focus on options, or to give him several choices of actions in a context.
It is an alternative to inline menus or simple dialogs on mobile. They must be dismissed in order to interact with the underlying content.
They may vary according to need and context, by using a number of elements, the composition (list or grid), etc.
Visual guidelines
The title should always refer to the previous clicked call to action or to the different possible actions.
Its background is full width to keep the user focused and save space.
On the content zone will be displayed a set of actions : the best practice is text associated with icons.
The modal always opens above an overlay, letting the user see that opening the modal bottom sheet has no impact on content behind.
Don’t forget to provide a quick way to close the bottom sheet with a close option down below the actions.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.