Bottom Sheet
This guide provides comprehensive information on when and how to use the BottomSheet component effectively in your applications
Basic BottomSheet
Use for presenting supplementary information, filters, or simple interactions. Keep content focused and provide clear ways to dismiss the sheet.
Action BottomSheet
Perfect for task completion with forms on mobile layouts. Utilize the maxHeight property to ensure the sheet provides enough space without covering the entire screen.
When to Use BottomSheets
Providing supplementary content or contextual actions on mobile interfaces
Presenting filters, settings, or share menus without navigating to a new page
When the content is secondary but requires a dedicated view area
As a responsive alternative to dropdowns or large dialogs that would otherwise crowd the screen
Best Practices
Height Management: Avoid bottom sheets that span the full height of the screen. Use the
maxHeightproperty to ensure users maintain context of the underlying page. The default is 80vh.Content Density: Keep content concise and actionable. Avoid overwhelming users with dense text or overly complex forms in a bottom sheet.
Accessibility: Provide meaningful
closeButtonAriaLabelvalues, especially when the default "Close" is not sufficiently descriptive for the context.Focus and Dismissal: BottomSheet inherits focus management and backdrop/escape key dismissal from the underlying Dialog component, ensuring accessibility standards are maintained.
