# @blaze-react/modal

> A modal dialog is a dialog that appears at the top of the main content. Use a modal for dialog boxes, forms, confirmation messages or other content that can be accessed.

Latest version **0.8.0-alpha.112** (published 2025-10-01) · GPL-3.0 license · 594 weekly downloads

## Install

```sh
npm install @blaze-react/modal
pnpm add @blaze-react/modal
yarn add @blaze-react/modal
bun add @blaze-react/modal
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

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

## Facts

| | |
|---|---|
| Version | 0.8.0-alpha.112 |
| Published | 2025-10-01 |
| First published | 2019-06-20 |
| Weekly downloads | 594 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | byte9 |
| Maintainers | marekb9, mcabrerapf, daoyong, grzegorzi, ishrat, andypail, tanane |

## Links

- npm: https://www.npmjs.com/package/@blaze-react/modal
- npm.io page: https://npm.io/package/@blaze-react/modal

## Recent versions

- 0.8.0-alpha.112 (latest) — 2025-10-01
- 0.8.0-alpha.117 (alpha) — 2026-03-11
- 0.8.0-alpha.115 — 2026-02-23
- 0.8.0-alpha.114 — 2026-01-08
- 0.8.0-alpha.86 — 2024-11-05
- 0.8.0-alpha.82 — 2024-07-26
- 0.8.0-alpha.66 — 2023-10-04
- 0.8.0-alpha.64 — 2023-09-14
- 0.8.0-alpha.58 — 2021-11-29
- 0.8.0-alpha.56 — 2021-11-29
- 0.8.0-alpha.52 — 2021-11-29
- 0.8.0-alpha.46 — 2021-10-06
- 0.8.0-alpha.45 — 2021-10-06
- 0.8.0-alpha.44 — 2021-10-06
- 0.8.0-alpha.43 — 2021-10-06
- … 100 more at https://npm.io/package/@blaze-react/modal/versions

## README

## Description

A modal dialog is a dialog that appears at the top of the main content.
Use a modal for dialog boxes, forms, confirmation messages or other content that can be accessed.

## Usage

- Simple

```js
const actions = [
  {
    callback: () => ({}),
    textButton: "Action 1"
  },
  {
    callback: () => ({}),
    textButton: "Action 2"
  }
];

<Modal title="Simple Modal" actions={actions} IsSimple>
  <p>lorem ipsum dolor...</p>
</Modal>;
```

- Alert

```js
const alertActions = [
  {
    callback: () => ({}),
    modifiers: "alert small",
    textButton: "delete"
  }
];

<Modal actions={alertActions} buttonModifiers="rounded alert" isAlert>
  <p>Delete item?</p>
</Modal>;
```

- Scrollable

```js
<Modal
  title="Scrollable Modal"
  buttonModifiers="outline dark rounded"
  actions={actions}
>
  <p>
    Content here that may need to be scrolled, can be text/forms/etc. Default
    modal with scrollable content:
  </p>
  <ol>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ol>
  ...etc
</Modal>
```

## API

##### Modal can receive a number of `props` as follow:

| NAME         |   TYPE   | DEFAULT  |
| :----------- | :------: | :------: |
| title        |  String  |  empty   |
| actions      |  Array   |    []    |
| isAlert      | Boolean  |  false   |
| isSimple     | Boolean  |  false   |
| isUpload     | Boolean  |  false   |
| showFooter   | Boolean  |   true   |
| isFullScreen | Boolean  |  false   |
| onClose      | Function | () => {} |

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