Bottom Sheet
UI ComponentsA mobile UI pattern where a panel slides up from the bottom of the screen, revealing content or actions while keeping the context of the current screen visible.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Bottom Sheet coming soon.
How It Works in Apps/Websites
Bottom sheets slide up from the screen bottom, covering part of the content. They can be dismissed by swiping down or tapping outside. Come in two main types: modal (blocks interaction with content behind) and persistent (stays alongside content). Often have a drag handle at top indicating they can be resized or dismissed.
How AI Interprets This Term
When you say 'bottom sheet', AI expects: a panel with rounded top corners sliding up from bottom edge. Has a small drag handle indicator at top center (pill shape). Content below, which could be a list, form, or actions. Background overlay dims content behind. Variable height.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a bottom sheet with a list of sharing options
Design a share bottom sheet for mobile: slides up 40% of screen height, drag handle at top (40px wide, 4px tall, gray, rounded). Contains grid of share icons (Messages, Mail, Copy Link, etc.), Cancel button at bottom. Semi-transparent overlay behind.
Show a peek state bottom sheet (showing header only) vs expanded state (full content visible)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Mobile secondary content
- •Share menus
- •Filters and options
- •Comments and details
When NOT to Use
- •Desktop interfaces
- •Critical actions (use modal)
- •Long forms
Related Terms
Drawer
A panel that slides in from the edge of the screen (usually left or right) to reveal navigation, filters, or additional content without navigating away from the current view.
Modal
A dialog box that appears on top of the main content, requiring user interaction before returning to the underlying page. It typically includes an overlay that dims the background.