Geist UI

Drawer

An interactive element fixed to the edge of the screen.

Basic usage.

Attribute	Description	Type	Accepted values	Default
visible	open or close	`boolean`	-	`false`
onClose	close event	`() => void`	-	-
onContentClick	event from modal content	`(e: MouseEvent) => void`	-	-
wrapClassName	className of the drawer dialog	`string`	-	-
keyboard	press Esc to close drawer	`boolean`	-	`true`
disableBackdropClick	click background and don't close	`boolean`	-	`false`
placement	position of the drawer	DrawerPlacement	-	`right`
...	native props	`HTMLAttributes`	`'name', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

type DrawerPlacement = 'top' | 'bottom' | 'right' | 'left'

Contributors