Bottom Sheet
A bottom sheet is a versatile UI container used to display additional content, tasks, or actions while maintaining visibility of the parent view. It’s particularly effective in mobile interfaces as it allows users to interact with supplementary content without losing their original context.
When to Use Bottom Sheets
Bottom sheets are ideal for:
Simple Content or Tasks
Displaying actions like options, notifications, or quick settings.
Context Retention
Helping users stay oriented by keeping part of the parent view visible.
Supplementary Workflows:
Offering lightweight, secondary interactions that don’t disrupt the main flow.
Best Practices for Using Bottom Sheets
Display One Sheet at a Time
Users expect to return to the parent view when closing a sheet.
Avoid chaining sheets. If a new sheet is needed, close the first one before opening the next.
Use Nonmodal Views When Appropriate
For supplementary actions that impact the parent view, use nonmodal alternatives like split views.
Prioritize Simplicity
Keep content concise and focused to ensure the sheet feels lightweight and intuitive.
Bottom Sheet Examples
Quick Settings
Adjusting brightness or enabling dark mode.
Contextual Details
Providing supplementary information while users interact with the main screen.
Bottom sheets are a powerful UI component for app designers, offering a blend of functionality and usability. Whether you’re designing in Figma or using a professional UI Kit, implementing bottom sheets can elevate your app’s design and user experience.