# @bolttech/molecules-modal

> The **Modal** component is a customizable React component that displays a modal dialog box with a title, content, and action buttons.

Latest version **0.22.2** (published 2026-06-08) · 0 weekly downloads

## Install

```sh
npm install @bolttech/molecules-modal
pnpm add @bolttech/molecules-modal
yarn add @bolttech/molecules-modal
bun add @bolttech/molecules-modal
```

## Health

**Score 50/100 (C)** — status: active.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.22.2 |
| Published | 2026-06-08 |
| First published | 2023-05-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 135 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |

## Links

- npm: https://www.npmjs.com/package/@bolttech/molecules-modal
- npm.io page: https://npm.io/package/@bolttech/molecules-modal

## Dependencies (6)

- [react](https://npm.io/package/react.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7
- [@bolttech/atoms-button](https://npm.io/package/@bolttech/atoms-button.md) 0.29.6
- [@bolttech/atoms-backdrop](https://npm.io/package/@bolttech/atoms-backdrop.md) 0.23.3
- [@bolttech/frontend-foundations](https://npm.io/package/@bolttech/frontend-foundations.md) 0.12.3

## Recent versions

- 0.22.2 (latest) — 2026-06-08
- 0.22.0 — 2026-04-08
- 0.20.6 — 2026-03-17
- 0.20.5 — 2026-02-27
- 0.20.4 — 2025-12-18
- 0.20.3 — 2025-10-03
- 0.20.2 — 2025-03-07
- 0.20.1 — 2025-02-05
- 0.20.0 — 2025-02-05
- 0.19.0 — 2024-12-05
- 0.18.0 — 2024-09-04
- 0.17.0 — 2024-09-02
- 0.16.0 — 2024-04-01
- 0.15.0 — 2024-02-21
- 0.14.4 — 2024-01-16
- … 29 more at https://npm.io/package/@bolttech/molecules-modal/versions

## README

# Modal Component

The **Modal** component is a customizable React component that displays a modal dialog box with a title, content, and action buttons.

## Installation

To use the **Modal** component, you need to install the required dependencies:

```bash
npm install @bolttech/frontend-foundations @bolttech/molecules-modal
```

or

```bash
yarn add @bolttech/frontend-foundations @bolttech/molecules-modal
```

## Usage

You can utilize the **Modal** component by importing it and including it in your JSX. Here's an example:

```jsx
import React, { useState } from 'react';
import { Modal } from '@bolttech/molecules-modal';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // Adjust the path to your component

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        title="Confirmation"
        cancel={{
          title: 'Cancel',
          variant: 'ghost',
          onClick: () => setIsModalOpen(false),
        }}
        cancel={{
          title: 'Confirm',
          variant: 'transaction',
          onClick: () => setIsModalOpen(true),
        }}
        footerDirection="default"
        fullHeight={true}
        closeOnBackdropClick={true}
      >
        <p>Are you sure you want to proceed?</p>
      </Modal>
    </BolttechThemeProvider>
  );
}

export default App;
```

## Props

The **Modal** component accepts the following props:

| Prop                   | Type                   | Description                                                                               |
| ---------------------- | ---------------------- | ----------------------------------------------------------------------------------------- |
| `children`             | `ReactNode`            | Content to be displayed within the modal.                                                 |
| `dataTestId`           | `string`               | The data-testid attribute for testing purposes.                                           |
| `isOpen`               | `boolean`              | Whether the modal is open or closed.                                                      |
| `title`                | `string`               | Title of the modal dialog box.                                                            |
| `confirm`              | `FooterButtonsType`    | Object containing the title, variant and onclick of the confirm button                    |
| `cancel`               | `FooterButtonsType`    | Object containing the title, variant and onclick of the cancel button.                    |
| `footerDirection`      | `default` or `reverse` | Direction of the buttons on the footer.                                                   |
| `fullHeight`           | `boolean`              | Boolean representing if the modal should take the full height of the page when on mobile. |
| `closeOnBackdropClick` | `boolean`              | Boolean representing if the modal should close when clicking outside of it.               |

## Functionality

The **Modal** component provides the following functionality:

- Modal Display: Renders a modal dialog box with the specified title, content, and buttons.
- Opening and Closing: Allows opening and closing the modal by setting the `isOpen` prop.
- Action Buttons: Provides action buttons for canceling and confirming.

## Contributions

Contributions to the **Modal** component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.

---
_Source: https://npm.io/package/@bolttech/molecules-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._