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. | |