Drawer API

API documentation for Drawer component

Drawer#

Props#

Defines valid properties in Drawer component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DrawerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DrawerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DrawerInstance) => ReactNode)	null	The children to render.
position	"top" \| "bottom" \| "left" \| "right" \| "full"	left	Position of the drawer.
onOpenChange	(event: DrawerChangeEvent) => void	null	Callback function that is called when the trigger is clicked.
open	boolean	false	Specifies the visibility of the drawer.
defaultOpen	boolean	false	Specifies the default visibility of the drawer.
modal	boolean	undefined	Defines if background should be blocked when drawer is displayed.
dismissable	boolean	true	Whether clicking outside closes the drawer.
blockScroll	boolean	false	Whether background scroll should be blocked when drawer is visible.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Drawer component.

name	type	default	description
opened	boolean	null	Whether the drawer is currently opened.
maskVisible	boolean	null	Whether the mask is currently visible.

Exposes#

Defines the methods and properties exposed by Drawer component.

name	type	default	description
state	useDrawerState	null	Current state of the drawer.
maskRef	RefObject<HTMLDivElement>	null	Reference to the mask element.
motionRef	RefObject<{ elementRef: RefObject<HTMLDivElement> }>	null	Reference to the motion element.
closeButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the close button element.
onOpenStateChange	() => void	null	Method to change the open state of the drawer.
close	() => void	null	Method to close the drawer.
onMotionEnter	() => void	null	Handler for motion enter events.
onMotionAfterEnter	() => void	null	Handler for motion after enter events.
onMotionBeforeLeave	() => void	null	Handler for motion before leave events.
onMotionAfterLeave	() => void	null	Handler for motion after leave events.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Drawer component.

name	type	default	description
root	DrawerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
mask	DrawerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the mask's DOM element.
trigger	DrawerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the trigger's DOM element.
triggerIcon	DrawerPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the trigger icon's DOM element.
portal	DrawerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the portal's DOM element.
header	DrawerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
title	DrawerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the title's DOM element.
close	DrawerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the close's DOM element.
closeIcon	DrawerPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the close icon's DOM element.
content	DrawerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
footer	DrawerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.

Types#

Instance

Instance of Drawer component.

values
ComponentInstance<DrawerProps, DrawerState, DrawerExposes>

DrawerTrigger#

Props#

Defines valid properties in DrawerTrigger component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DrawerTriggerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerTriggerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DrawerTriggerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DrawerTriggerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DrawerTrigger component.

name	type	default	description
drawer	DrawerInstance	null	Instance of the Drawer component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerTrigger component.

name	type	default	description
root	DrawerTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DrawerTrigger component.

values
ComponentInstance<DrawerTriggerProps, DrawerTriggerState, DrawerTriggerExposes>

DrawerPortal#

Props#

Defines valid properties in DrawerPortal component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DrawerPortalInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerPortalInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DrawerPortalPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DrawerPortalInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DrawerPortal component.

name	type	default	description
drawer	DrawerInstance	null	Instance of the Drawer component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerPortal component.

name	type	default	description
root	DrawerPortalPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DrawerPortal component.

values
ComponentInstance<DrawerPortalProps, DrawerPortalState, DrawerPortalExposes>

DrawerHeader#

Props#

Defines valid properties in DrawerHeader component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DrawerHeaderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerHeaderInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DrawerHeaderPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DrawerHeaderInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DrawerHeader component.

name	type	default	description
drawer	DrawerInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerHeader component.

name	type	default	description
root	DrawerHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DrawerHeader component.

values
ComponentInstance<DrawerHeaderProps, DrawerHeaderState, DrawerHeaderExposes>

DrawerTitle#

Props#

Defines valid properties in DrawerTitle component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DrawerTitleInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerTitleInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DrawerTitlePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DrawerTitleInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DrawerTitle component.

name	type	default	description
drawer	DrawerInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerTitle component.

name	type	default	description
root	DrawerTitlePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DrawerTitle component.

values
ComponentInstance<DrawerTitleProps, DrawerTitleState, DrawerTitleExposes>

DrawerClose#

Props#

Defines valid properties in DrawerClose component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DrawerCloseInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerCloseInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DrawerClosePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DrawerCloseInstance) => ReactNode)	null	The children to render.
iconOnly	boolean	true	Whether to show the DrawerClose with a borderless style.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	'secondary'	Severity type of the DrawerClose.
variant	"link" \| "text" \| "outlined"	'text'	Variant of the DrawerClose.
rounded	boolean	true	Whether to show the DrawerClose with a rounded style.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DrawerClose component.

name	type	default	description
drawer	DrawerInstance	null	Instance of the Drawer component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerClose component.

name	type	default	description
root	DrawerClosePassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DrawerClose component.

values
ComponentInstance<DrawerCloseProps, DrawerCloseState, DrawerCloseExposes>

DrawerContent#

Props#

Defines valid properties in DrawerContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DrawerContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DrawerContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DrawerContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DrawerContent component.

name	type	default	description
drawer	DrawerInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerContent component.

name	type	default	description
root	DrawerContentPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DrawerContent component.

values
ComponentInstance<DrawerContentProps, DrawerContentState, DrawerContentExposes>

DrawerFooter#

Props#

Defines valid properties in DrawerFooter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DrawerFooterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerFooterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DrawerFooterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DrawerFooterInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DrawerFooter component.

name	type	default	description
drawer	DrawerInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerFooter component.

name	type	default	description
root	DrawerFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DrawerFooter component.

values
ComponentInstance<DrawerFooterProps, DrawerFooterState, DrawerFooterExposes>

useDrawer#

Props#

Defines valid properties in useDrawer.

name	type	default	description
open	boolean	false	Specifies the visibility of the drawer.
defaultOpen	boolean	false	Specifies the default visibility of the drawer.
modal	boolean	undefined	Defines if background should be blocked when drawer is displayed.
dismissable	boolean	true	Whether clicking outside closes the drawer.
blockScroll	boolean	false	Whether background scroll should be blocked when drawer is visible.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
onOpenChange	(event: useDrawerChangeEvent) => void	null	Callback function that is called when the trigger is clicked.

State#

Defines valid state in useDrawer.

name	type	default	description
opened	boolean	null	Whether the drawer is currently opened.
maskVisible	boolean	null	Whether the mask is currently visible.

Exposes#

Defines the methods and properties exposed by useDrawer.

name	type	default	description
state	useDrawerState	null	Current state of the drawer.
maskRef	RefObject<HTMLDivElement>	null	Reference to the mask element.
motionRef	RefObject<{ elementRef: RefObject<HTMLDivElement> }>	null	Reference to the motion element.
closeButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the close button element.
onOpenStateChange	() => void	null	Method to change the open state of the drawer.
close	() => void	null	Method to close the drawer.
onMotionEnter	() => void	null	Handler for motion enter events.
onMotionAfterEnter	() => void	null	Handler for motion after enter events.
onMotionBeforeLeave	() => void	null	Handler for motion before leave events.
onMotionAfterLeave	() => void	null	Handler for motion after leave events.

Events#

useDrawerChangeEvent

Event fired when the drawer's open state changes.

name	type	description
value	boolean	The value of the drawer.

Types#

Instance

Instance of useDrawer headless.

values
HeadlessInstance<useDrawerProps, useDrawerState, useDrawerExposes>