HamburgerHamburger Icon

Modals

Modals are for displaying content overlaid the current page. The main use cases for modals are for displaying forms or expanding content from the referring page. Modals open from a button, link or icon, and can be closed via an icon, or clicking outside of the main content window.

<Modal handleClose={()=>setActiveModal(false)}>Modal Content Goes Here</Modal>
Copy
Open Modal From Button
Click To Open Modal
<Button color={"purple"} onClick={e=>{e.preventDefault();setActiveModal(true);}}>Click To Open Modal</Button>
Copy

This example assumes that you've set values to manage the modal state:

 const [activeModal, setActiveModal] = useState(false);
Copy
Modal Properties

Name

Description

Type

Required

Default

children

Modal content.

node

false

null

className

List of classes for this element.

string | array

false

""

handleClose

Event handler when modal is closed.

function

false

null

hideOnDesktop

Will hide modal on desktop devices and up if true

boolean

false

false

desktopWidth

Width in pixels of minimum desktop breakpoint

number

false

null