Usage

Example Code

1import {
2Sheet,
3SheetClose,
4SheetContent,
5SheetTrigger,
6} from "inc-design-system/sheet";

Example Code

1<Sheet>
2  <SheetTrigger>
3    <h1>Open Sheet</h1>
4  </SheetTrigger>
5  <SheetContent>
6    Content goes here
7    <SheetClose>
8      Close Sheet
9    </SheetClose>
10  </SheetContent>
11</Sheet>

Props

Sheet

For more props:

API Reference

Prop	Type	Description	Default
defaultOpen	boolean	The open state of the sheet when it is initially rendered. Default is false.	false
open	boolean	The controlled open state of the sheet, must be used with onOpenChange. Default is false.	false
onOpenChange	(open: boolean) => void	Event handler called when the open state of the sheet changes.	-

SheetTrigger

For more props:

API Reference

Prop	Type	Description	Default
asChild	boolean	Change the default rendered element for the one passed as a child, merging their props and behavior. Default is false.	false

SheetContent

For more props:

API Reference

Prop	Type	Description	Default
overlayClassName	string	The classname for the overlay of the sheet, in order to control the z-index if needed.	-
side	'top' \| 'bottom' \| 'left' \| 'right'	The side of the screen from which the sheet will originate from. Default is 'right'.	'right'
showClose	boolean	Renders an 'X' icon on the top right corner of the sheet in order to close the sheet. Default is true.	true
onOpenAutoFocus	(event: Event) => void	Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault.	-
onCloseAutoFocus	(event: Event) => void	Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.	-
onEscapeKeyDown	(event: Event) => void	Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.	-
onPointerDownOutside	(event: Event) => void	Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.	-
onInteractOutside	(event: Event) => void	Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault.	-

SheetClose

For more props:

API Reference

Prop	Type	Description	Default
asChild	boolean	Change the default rendered element for the one passed as a child, merging their props and behavior. Default is false.	false