Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Right Side Modal
Opens from the right side. Click outside or press Escape to close.
Left Side Menu
Navigation menu that slides from the left.
Top Notifications
Notification panel that slides from the top.
Bottom Share Sheet
Mobile-style bottom sheet for sharing options.
Non-Modal Bottom Sheet
Format panel that slides from bottom and doesn't block interaction.
Sheet Features
Modal vs Non-Modal
- • Modal sheets block interaction with main content
- • Non-modal sheets allow continued interaction
- • Modal sheets close when clicking outside
- • Non-modal sheets only close via button or Escape
Position Options
- • Right: Default position, great for forms and details
- • Left: Perfect for navigation menus
- • Top: Ideal for notifications and alerts
- • Bottom: Mobile-friendly sharing and actions