Modal

Quick start

Here's a quick start guide to get started with the modal component

Importing Component

import { Modal } from "@hover-design/react";

Code Snippets and Examples

Simple Modal

import { Modal, Label, Input, Flex, Button } from "@hover-design/react";

function Demo() {
  const [isOpen, setIsOpen] = useState(false);
  <Button onClick={()=>{setIsOpen(true)}}>Open Modal</Button>
  <Modal
    title="Modal Title"
    isOpen={isOpen}
    onClose={() => {
      setIsOpen(false);
    }}
  >
    {/* Modal content */}
  </Modal>;
}

Modal without Heading and Icon

<Modal isCloseIconVisible={false}>{/* Modal content */}</Modal>

Modal without Overlay

<Modal showOverlay={false}>{/* Modal content */}</Modal>

Prevent Clicking Outside Modal to Close

<Modal closeOnClickOutside={false}>{/* Modal content */}</Modal>

Customizing Modal Base and overlay

You can customize the base and overlay styles of the modal by passing in the baseStyles and overlayStyles props. Refer this Spec for this:

overlayStyles

Property	Description	Default
backgroundColor	Background of Overlay	rgba(0, 0, 0)
zIndex	Z Index	1
position	Position	fixed
top	Top	0
left	Left	0
right	Right	0
bottom	Bottom	0
filter	Filter	unset
opacity	opacity	0.5

baseStyles

Property	Description	Default
backgroundColor	Background of Base	rgba(255, 255, 255)
zIndex	Z Index	10
position	Position	relative
transform	Transform	translate(-50%, -50%)
top	Top	50%
left	Left	unset
right	Right	unset
bottom	Bottom	unset
padding	Padding	12px
width	Width	440px
height	height	auto
boxShadow	Box Shadow	0 0 10px rgba(0, 0, 0, 0.5)

<Modal baseStyles={{ backgroundColor: "#C1292E" }} isCloseIconVisible={false}>
  {/* Modal content */}
</Modal>

Props Reference

Key	type	Optional?
children	React.ReactNode	No
isOpen	boolean	No
onClose	()=>void	No
title	string	Yes
closeOnClickOutside	boolean	Yes
isCloseIconVisible	boolean	Yes
baseStyles	base CSS object	Yes
overlayStyles	overlay CSS object	Yes
showOverlay	boolean	Yes