Bottom Sheet @astryx-svelte/core v0.4.5 · BottomSheet
Usage
A mobile touch surface for filters, actions, forms, and detail views that should rise from the bottom of the viewport; use BottomSheetSwitcher for multi-step flows.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use for mobile-first surfaces (filters, share sheets, quick actions) where the content should rise from the bottom edge. |
| Do | Pick the starting height that fits the content: 'hug' for short bounded content, 'capped' for lists, and 'tall' for forms or streaming/resizing content. |
| Do | Use purpose='form' to protect entered data from scrim clicks and swipes while keeping Escape available; reserve purpose='required' for flows that must end through an explicit action. |
| Don't | Don't make the sheet content overly long. Consider breaking it into steps and using Bottom Sheet Switcher. |
Examples
Common configurations, variations, and states.Bottom Sheet — Height variants
Compares hug, capped, and tall starting heights for different amounts of content.
Bottom Sheet — Mobile keyboard
Uses a tall, scrollable form that keeps focused controls visible above the mobile keyboard.
Bottom Sheet — No scrim
Keeps the page visible and interactive behind a non-modal bottom sheet.
Bottom Sheet — Snap points
Drag-to-resize stops: a half-height working surface, and a peek that slides away and thins the scrim.