Bottom Sheet

A bottom sheet is a mobile component presenting a set of choices or actions easily reachable with the thumb.

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.

Component overview

Component overview

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.

Back to top