@leafygreen-ui/marketing-modal

Marketing Modal

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/marketing-modal

Yarn

yarn add @leafygreen-ui/marketing-modal

NPM

npm install @leafygreen-ui/marketing-modal

Example

import MarketingModal from '@leafygreen-ui/marketing-modal';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(!open)}>Open Modal</button>
      <MarketingModal
        open={open}
        buttonProps={{
          children: 'Get started',
          onClick: () => setOpen(false),
        }}
        onLinkClick={() => setOpen(false)}
        onClose={() => setOpen(false)}
        title="Introducing New Feature!"
        graphic={
          <img alt="" src="examples/DataLake.png" width={275} height={220} />
        }
        graphicStyle={ImageStyle.Center}
        linkText="Cancel"
      >
        This is some description text, and it is extra long so it fills up this
        modal. Another thing about the modals here.
      </MarketingModal>
    </>
  );
}

Properties

Prop	Type	Description	Default
open	boolean	Determines open state of Modal component	false
onLinkClick	function	Callback that fires when the secondary link is clicked. This can be used to set the modal to be closed.	() => {}
onClose	function	Callback that fires when the cancel button, x button, or backdrop is clicked. This can be used to set the modal to be closed.	() => {}
title	ReactNode	Title text to display above the main content text.
graphic	React.ReactElement	Element to be used as the main graphic of the modal.
graphicStyle	'center', 'fill'	Determines how the main graphic should be displayed in the modal.	'center'
children	node	Children that will be rendered inside <MarketingModal /> component.
linkText	string	Text content of the alternate action link.
className	string	Style to be applied to the container's root node.
darkMode	boolean	Determines if the component will appear in dark mode.	false
closeIconColor	'default', 'dark', 'light'	Determines the color of the close icon.	'default'
showBlob	boolean	Determines if the blob illustration should appear in the background of the modal. Currently will only work if darkMode is set to false.	false
blobPosition	'top left', 'top right', 'bottom right'	Determines the position of the blob if showBlob is set to true.	top left
disclaimer	React.ReactElement	Disclaimer text to be rendered under the primary action button.
buttonProps	ButtonProps	The primary button. An object that accepts all Button props except for the variant prop.