Modal

A content area that overlays the existing page.

Examples

Basic Modal

The Modal is responsive and allows for a title to be passed. ModalContent is a scrollable content area, and ModalFooter provides a place for CTAs.

Light Modal

An alternate modal type, the "light" modeal puts its content on a cream colored background.

Compact Modal

For information-dense usages, a "compact" modal is snug to the top of the frame and has a tighter padding. Additionally, a contentStyle of "card" will put the content and footer controls on a white background.

Props

ModalProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
autoFocus	string		No	Accepts a selector to auto focus.
compact	false | true	false	No	Should the modal render the "compact" treatment? It will be snug to the top of the frame and have a tighter padding.
contentStyle	"card"	undefined	No	Should the content be styled inside of a white card or sit directly on the colored background.
onClose	() => void		No	Emit a close event.
open	false | true	false	No	Is the modal open?
title	ReactNode		No	A title to display above the content.
type	"dark" | "light"	'dark'	No	The color type to use for the modal.
width	number		No	A max width to set for the header/content/footer.

ModalContentProps

Name	Type	Default Value	Required	Description
All attributes of a <div />

ModalFooterProps

Name	Type	Default Value	Required	Description
All attributes of a <div />

ModalHeaderProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
italic	false | true	false	No	Display the text with emphasis?
size	"body" | "h1" | "h2" | "h3" | "meta" | "inherit" | "d1" | "d2" | "subhead" | "body-lg" | "cta"	'inherit'	No	How large should the text be? This also affects the font-face for display text.
weight	"md" | "light" | "100" | "300" | "400" | "500" | "700" | "800" | "900" | "thin" | "normal" | "bold" | "extrabold" | "black"	'normal'	No	How heavy should the text be?