# @leafygreen-ui/marketing-modal > leafyGreen UI Kit Marketing Modal Latest version **8.2.2** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/marketing-modal pnpm add @leafygreen-ui/marketing-modal yarn add @leafygreen-ui/marketing-modal bun add @leafygreen-ui/marketing-modal ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 8.2.2 | | Published | 2026-10-02 | | First published | 2020-09-10 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 172.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/marketing-modal - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/marketing-modal - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/marketing-modal ## Dependencies (7) - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1 - [@leafygreen-ui/modal](https://npm.io/package/@leafygreen-ui/modal.md) ^22.0.2 - [@leafygreen-ui/button](https://npm.io/package/@leafygreen-ui/button.md) ^25.2.2 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3 - [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.5 ## Recent versions - 8.2.2 (latest) — 2026-10-02 - 4.0.10 (beta) — 2023-07-26 - 5.0.0-alpha.1 (alpha) — 2023-07-20 - 4.0.8-next.7 (next) — 2023-05-26 - 3.0.6-test.1 (test) — 2022-09-29 - 8.2.1 — 2026-01-21 - 8.2.0 — 2026-01-20 - 8.1.7 — 2025-12-08 - 8.1.6 — 2025-11-24 - 8.1.4 — 2025-11-13 - 8.1.3 — 2025-10-31 - 8.1.2 — 2025-10-21 - 8.1.1 — 2025-10-13 - 8.1.0 — 2025-10-07 - 8.0.2 — 2025-09-10 - … 87 more at https://npm.io/package/@leafygreen-ui/marketing-modal/versions ## README # Marketing Modal ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/marketing-modal.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/marketing-modal/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/marketing-modal ``` ### Yarn ```shell yarn add @leafygreen-ui/marketing-modal ``` ### NPM ```shell npm install @leafygreen-ui/marketing-modal ``` ## Example ```tsx import MarketingModal from '@leafygreen-ui/marketing-modal'; function Example() { const [open, setOpen] = useState(false); return ( <> setOpen(false), }} onLinkClick={() => setOpen(false)} onClose={() => setOpen(false)} title="Introducing New Feature!" graphic={ } 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. ); } ``` ## 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 `` 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](https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md#properties) except for the `variant` prop. | | ## Testing Considerations The `MarketingModal` component uses the native `HTMLDialogElement` API for better accessibility and browser-native behavior. However, `JSDOM` (used by `Jest` and other test runners) does not fully support this API. You'll need to mock the `show`, `showModal`, and `close` methods in your test setup: ```tsx beforeAll(() => { HTMLDialogElement.prototype.show = jest.fn(function mock( this: HTMLDialogElement, ) { this.open = true; }); HTMLDialogElement.prototype.showModal = jest.fn(function mock( this: HTMLDialogElement, ) { this.open = true; }); HTMLDialogElement.prototype.close = jest.fn(function mock( this: HTMLDialogElement, ) { this.open = false; }); }); ``` This mock can be placed in a `beforeAll` block in your test file, or in a global test setup file. --- _Source: https://npm.io/package/@leafygreen-ui/marketing-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._