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.
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.
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.
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.
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.
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!
