In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

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.

You can see a bottom sheet with many fonction: upload files, select files to upload and delete files.
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.

You can see a bottom sheet in context of a file manager application.
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