Dialog

Quick start

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

Importing Component

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

Code Snippets and Examples

Simple Dialog

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

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

Customizing Dialog

You can customize the base styles of the dialog by passing in the styles props. Refer this table for its values:

styles

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

Props Referece

Attributes	Values	Optional ?
isOpen	boolean	No
onClose	()=> void	No
isCloseIconVisible	boolean	Yes
closeOnClickOutside	boolean	Yes
styles	styles Object	Yes