Bottom Drawer

This component demonstrates a drawer that slides up from the bottom of the screen. It's commonly used for mobile interfaces, action sheets, or contextual controls.

Common Use Cases

  • Mobile navigation menus
  • Selection/filter interfaces
  • Action sheets and quick options
  • Media players or playback controls
  • Additional context for the current view

Example Demo

Click the button above to see the bottom drawer in action. This pattern is particularly useful on mobile devices where screen space is limited and ergonomics favor interactions near the bottom of the screen.

Bottom drawers can have different heights based on their content and can sometimes be draggable to allow users to adjust how much content is visible.

Select an Option