Bottom Sheets - UI Element

What are Bottom Sheets in UI/UX Design?

A bottom sheet is an overlay that is placed at the bottom of a screen and contains additional information, details, or action. Bottom sheets are used to maintain a focused experience on the parent view, while the bottom sheets are anchored to the bottom of the screen. 

Bottom sheets are a versatile element that can carry a wide range of information and layouts, such as menu items, can trigger actions, and contain additional content.

Types of Bottom Sheets in UI Design

  1. Standard

Standard bottom sheets co-exist with the parent view of the screen. This element gives the user the ability to interact simultaneously with both screens. Standard bottom sheets are used to maintain a secondary feature available on the screen while the users interact with the main design focus.


Types of Bottom Sheets in UI Design
Standard Bottom Sheet by uinkits

  1. Modal

Modal bottom sheets appear over the content from an app, disabling the app functions until the modal bottom sheet is dismissed. A modal bottom sheet can be interacted with or dismissed, as its behavior is suitable for a menu, giving the users the ability to focus on the available options.

Types of Bottom Sheets in UI Design
Modal Bottom Sheet by uinkits

When to Use Bottom Sheets in UI Design

  • Behavior

Use bottom sheets when you want to present additional information or simple tasks. A bottom sheet allows the users to continually see the parent view as it helps the users interact while the original context is available.

  • Interaction

Standard bottom sheets have the ability to remain on screen when the user interacts with the main design. They give the user the ability to scroll through the main design as they carry a default evolution of 8dp. When the focus of the user is switched to the standard bottom sheet, the full-screen height of the component needs to be accompanied by a collapse icon.

Bottom sheets need to be used when the user has the ability to dismiss the element in order to better interact with the main content.

Modal bottom sheets must be interacted with or dismissed in order to regain accessibility to the main design. This type of bottom sheet should be used when multiple options and actions are offered, as it helps the user focus on the tasks more easily.

Modal bottom sheets can also be used to present additional actions. Modal bottom sheets appear when a user triggers an action and needs to have the ability to be dismissed.

How to Use Bottom Sheets in UI Design

  • Use bottom sheets close-packed and medium size.
  • The content available on a bottom sheet needs to be secondary, not carry the main information.
  • The user needs to have the ability to dismiss a bottom sheet in order to better interact with the main content.
  • In order to provide access to the main interactions, the initial state of the modal bottom sheet needs to be capped at 50% of the screen’s height.

Use the Bottom Sheet UI Element in Your UI/UX Design With uinkits

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find bottom sheets and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!