Skip to main content

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

NameTypeDefault ValueRequiredDescription
All attributes of a <div />
autoFocusstringNoAccepts a selector to auto focus.
compactfalse | truefalseNoShould the modal render the "compact" treatment? It will be snug to the top of the frame and have a tighter padding.
contentStyle"card"undefinedNoShould the content be styled inside of a white card or sit directly on the colored background.
onClose() => voidNoEmit a close event.
openfalse | truefalseNoIs the modal open?
titleReactNodeNoA title to display above the content.
type"dark" | "light"'dark'NoThe color type to use for the modal.
widthnumberNoA max width to set for the header/content/footer.

ModalContentProps

NameTypeDefault ValueRequiredDescription
All attributes of a <div />

ModalFooterProps

NameTypeDefault ValueRequiredDescription
All attributes of a <div />

ModalHeaderProps

NameTypeDefault ValueRequiredDescription
All attributes of a <div />
italicfalse | truefalseNoDisplay the text with emphasis?
size"body" | "h1" | "h2" | "h3" | "meta" | "inherit" | "d1" | "d2" | "subhead" | "body-lg" | "cta"'inherit'NoHow 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'NoHow heavy should the text be?