Sheet
When to use
- Mobile navigation
- Filters that should stay on screen
- Inspect or edit an item while the list stays visible
Use Dialog for a short confirmation in the center of the page.
Usage
Usage
Sides
Sides
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | Edge the panel slides from. Set on SheetContent. |
closeButtonVisible | boolean | true | Corner close button on SheetContent. Set false when you provide your own. |
asChild | boolean | false | On SheetTrigger and SheetClose. Requires a button child. |
open | boolean | — | Controlled open state on Sheet. |
onOpenChange | (open: boolean) => void | — | Called when the sheet opens or closes. |
Notes
- Default
sideisright. - Set
closeButtonVisible={false}only when you render your own close control. - Same
asChildrule as Dialog: the trigger child must be a button.