Drawer

An interactive element fixed to the edge of the screen.

Basic usage.

Preview

See code

Change the placement of the drawer with the placement prop.

Preview

See code

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'

Dot

Fieldset

MADE & DESIGNED WITHBY BRUNO ANDRADE