Marketing modals are a great way to showcase a new service or feature to the user, but make sure they'll be interested in it.

Marketing Modal

Renders the component with dark mode styles.

darkMode

enum

Position of the blob visual effect. Defaults to top-left.

Note: The blob is only rendered if: `showBlob` prop is `true`, and the `graphicStyle` prop is `center`.

blobPosition

buttonText

string

React Element to be rendered as the modal's hero image

graphic

ReactElement<any, string | JSXElementConstructor<any>>

Determines the rendering style of the graphic.

`fill` adds a curving effect to the bottom border of the graphic.

graphicStyle

linkText

Callback fired when the primary action button is clicked.

onButtonClick

() => void

onClose

Callback fired when the secondary link element is clicked.

onLinkClick

Determines whether the blob should be rendered.

showBlob

title

Content that will appear inside of the Modal component.

children

closeIconColor

className applied to overlay div.
Disclaimer: This prop may be deprecated in future versions of Modal

contentClassName

By default, when a focus trap is activated the first element in the focus trap's tab order will receive focus.
With this option you can specify a different element to receive that initial focus.
Selector string (which will be passed to document.querySelector() to find the DOM node)

initialFocus

open

Callback to change the open state of the Modal.

setOpen

(open: boolean) => void | Dispatch<SetStateAction<boolean>>

Callback to determine whether or not Modal should close when user tries to close it.