Use a bottom sheet to surface contextual content or actions without fully leaving the current screen.
Contains a child pattern component inside that defines the layout.
Useful for quick, focused tasks that are easy to complete and dismiss.
Usage
Use bottom sheets for short, contextual tasks that relate directly to the current screen.
Keep content concise, focused and scannable. Each bottom sheet should have a single clear purpose.
Don’t stack multiple bottom sheets, which can confuse hierarchy and escape paths or create stepped bottom sheets with multiple screens.
Don’t use full-bleed imagery as it can reduce clarity and make the sheet feel like a full screen takeover. Stick to icons and supporting illustrations within bottom sheets.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
❌ |
|
App (@ovotech/element-native) |
v5+ |
Related components