Name	Description	Default	Control
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

No Preview

Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config.
Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Modal

Add modern dialog modals to your page according to your needs.

Name	Description	Default	Control
size	The size of the modal smmdlgfullscreen	md
position	The position of the modal from window topcenter	center
scrollBehaviour	Attribute to change the scroll behaviour of the modal noneinsideoutside	none
noCloseButton	Attribute to hide the close button bool	false	FalseTrue
preventClose	Attribute to prevent close the modal from backdrop click and esc key bool	false	FalseTrue
noPadding	Attribute to remove the padding of the modal bool	false	FalseTrue
backdropBlur	Attribute to make the backdrop modal blured bool	false	FalseTrue
backdropColor	Attribute to change color of backdrop overlay	-

Stories

Props

Modal

Name	Description	Default
children*	The content of the modal ReactNode	-
isOpen*	State to control view the modal boolean	false
onClose*	Event to close the modal () => void	-
size	The size of the modal smmdlgfullscreen	md
position	The position of the modal from window topcenter	center
noCloseButton	Attribute to hide the close button boolean	false
backdropBlur	Attribute to make the backdrop modal blured boolean	false
backdropColor	Attribute to change color of backdrop overlay string	-
preventClose	Attribute to prevent close the modal from backdrop click and esc key boolean	false
scrollBehaviour	Attribute to change the scroll behaviour of the modal noneinsideoutside	none
noPadding	Attribute to remove the padding of the modal boolean	false
className	Attribute to add your own class name string	-
id	Attribute to add your own id string	-
style	Attribute to add your own style CSSProperties	-
closeButton	Add your custom close button ({ onClose }) => ReactNode	-

ModalHeader

Name	Description	Default
children*	The content of the modal header ReactNode	-
titlePosition	The position of the title topbottom	bottom
align	Attribute for align the title startcenter	center
isRegular	Attribute to make the title is regular font weight (400) boolean	-
className	Attribute to add your own class name string	-
style	Attribute to add your own style CSSProperties	-

ModalBody

Name	Description	Default
children*	The content of the modal body ReactNode	-
className	Attribute to add your own class name string	-
style	Attribute to add your own style CSSProperties	-

ModalFooter

Name	Description	Default
children*	The content of the modal footer ReactNode	-
justify	The position of the footer content startcenterend	end
className	Attribute to add your own class name string	-
style	Attribute to add your own style CSSProperties	-