What is a bottom sheet?

A Bottom Sheet is a design element in the user interface of applications, especially in mobile apps and web applications. It is a modal view or overlay that slides up from the bottom of the screen, presenting additional information, options, or actions without covering the entire screen.

‍

Bottom Sheets are often used to display context-related information or actions related to the current screen content. They provide a space-saving way to offer additional content or features without requiring the user to switch to another page or view.

‍

There are various types of Bottom Sheets, including:

‍

Persistent Bottom Sheet:

‍

This is a Bottom Sheet that remains visible on the screen even when the user interacts with other elements. For example, it can be used to display a thumbnail view of content while the user simultaneously navigates through the application.

‍

Modal Bottom Sheet:

‍

This is a temporary overlay that partially or completely covers the main screen and prompts the user to perform a specific action or view additional information. Typically, the user needs to close the Bottom Sheet to return to the previous view.

‍

Peek Gesture Bottom Sheet:

‍

Some Bottom Sheets come with a "peek" gesture, where the user can swipe up from the bottom of the screen to partially reveal the Bottom Sheet without fully opening it. This allows the user to take a quick look at the content before deciding to open it fully.