Bottom drawer

Alternatives

• Bottom panel — A non-modal surface that floats at the bottom of the viewport while the page stays interactive. Use it for contextual actions such as bulk actions on a selection.
• Side drawer — Used for light forms and information content to support the user's main activity without disrupting it.
• Product menu — Used to display a collapsable menu as an overlay.

BottomDrawer

A bottom drawer is a modal dialog that slides in from the bottom of the screen. They are used to display helpful information and large forms (including datatables) that support the users main activity without interrupting it.

• There can only be one instance of a bottom drawer open at a time. Bottom drawers don't stack like side drawers.
• Bottom drawers, side drawers and product menus cannot be used together i.e a bottom drawer should never have a side drawer or a product menu inside it and vice versa.

Height

A bottom drawer should maintain the same height throughout it's life cycle as having the content jump around can be a frustrating experience for the user.