Variant

Here are some types of alerts, including:

Anatomy

Bottom sheets are a design pattern in mobile apps designed to show temporary context-specific information while keeping the main content accessible. They work well for presenting a few options or providing extra details, allowing for quick access to controls. However, avoid stacking them on top of other bottom sheets or using them for displaying long content.

1. Content Container
2. Navigation (back or close)
3. Title header
4. Drag handle (Optional)
5. Button container (Optional)

Usage

Bottom sheets follow the principle of progressive disclosure. They are typically triggered by a user’s action and provide additional details. They are not suitable for displaying information or tools that are always needed because they intentionally cover a portion of the screen.

Instead, they are used to present extra information, contextual controls, or both. What sets bottom sheets apart from other overlays like dialogs is that they maintain good visibility of the underlying information. This makes them particularly useful when users need to reference the main information while interacting with the content or options in the sheet.

A common, though somewhat incorrect, justification for using bottom sheets is that they make it easier for users on mobile devices to reach items at the bottom of the screen. Unfortunately, this is not universally true, as users hold their mobile devices in various ways, making the middle of the screen the most accessible area for tapping in the majority of cases

Modal and nonmodal bottom sheets

The modal version of bottom sheets functions much like traditional modal popups. They require users to interact with them or dismiss them before they can proceed with other actions. A modal bottom sheet prevents any interactions with the background content while it’s displayed. Typically, a semi-transparent dark overlay is placed over the inaccessible background content to indicate its unavailability.

Modal bottom sheets

Non-modal bottom sheets don’t demand user interaction; they reside at the bottom of the screen and permit users to engage with the background content. They are suitable for displaying detailed information or options alongside the main content on the screen. ‘example google map’.

Certain bottom sheets are expandable. Users can tap or swipe the bottom sheet upwards to make it expand into a full-screen (or nearly full-screen) modal view. Usually, bottom sheets begin as non-modal when in their minimized state but switch to a modal view when expanded.

Allow the use of back for dismissing the bottom sheet

One challenge with bottom sheets, especially when they’re expanded to a full-screen view, is that they can resemble regular pages. Consequently, some users might not realize they are interacting with a bottom sheet and could expect to use standard navigation elements like the phone’s Back button or the Back gesture to leave the screen. However, not all bottom sheets support this interaction method.

As a result, when a page triggers a bottom sheet or overlay during the user’s journey, it disrupts the typical interaction pattern. Exiting from it may or may not be achievable using the Back button, potentially causing confusion. You can address this issue by ensuring that the Back button can be used to dismiss the bottom sheet, allowing users to seamlessly return to their previous view.

Include a Close Button

While most bottom sheets can be closed by swiping down (or tapping) the top grab handle, this element is often overlooked. Additionally, some users may not be aware of this functionality. Furthermore, vertical swiping can lead to swipe ambiguity: depending on where exactly the gesture is initiated, it might close the bottom sheet, open the notification drawer, or display the phone’s control panel.

To ensure users can consistently dismiss the bottom sheet, it’s advisable to include a visible Close (or X) button on the screen. We suggest incorporating a distinct Close button, typically styled as an X or labeled as ‘Close,’ at the top of the bottom sheets, in addition to the grab handle. This button offers the advantage of aiding users who rely on screen readers or keyboard navigation and may not be able to see or swipe the screen.

Do Not Stack Bottom Sheets

One of the major issues with bottom sheets arises when an app layers multiple sheets on top of each other.

As discussed earlier, stacked bottom sheets pose certain challenges. Users inevitably find themselves having to keep track of their current position within the quickly multiplying stack of overlays. They must also differentiate between dismissing the last sheet in the stack and dismissing the entire stack, as demonstrated in the example below.

It is highly advisable to avoid using a bottom sheet as a replacement for typical page-to-page user flows. A bottom sheet is a transient UI element designed for temporary interruptions or branching points in the user’s journey, rather than serving as a stable location for users to revisit or spend extended periods. For instance, it’s not suitable to employ a sheet to present a detailed e-commerce product page. Such a sheet may lead users to related products, reviews, or detailed specifications, disrupting the established conventions for navigating between pages.

Do Not Use a bottom sheets only for short interactions

Lastly, we discourage the use of a bottom sheet when it’s expected that users will spend an extended amount of time reviewing the information or options presented within it. Bottom sheets are inherently transient UI elements designed for supporting swift interactions, and they are not suitable for displaying complex or detailed content.

Coming soon