npm package: @licuido-ui/ui_dialog
Description: The `DialogBox` component is a customizable modal dialog box that can be used to display information, messages, or custom content with optional title, body, and footer components.
Latest version: 4.0.1

# DialogBox

The `DialogBox` component is a customizable modal dialog box that can be used to display information, messages, or custom content with optional title, body, and footer components.

### Author

- @author Narayanamoorthi <narayana@crayond.co>

## Link

[Story Book Link DialogBox](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i "@licuido-ui/ui_dialog"
```

## Import component

```jsx
import { DialogBox } from '@licuido-ui/ui_dialog';
```

## Usage

```jsx
<DialogBox
  open={open}
  handleClose={handleClose}
  closeIcon={<HighlightOffIcon />}
  title='Upload Box'
  maxWidth='sm'
  Body={}
  footerComponent={}
/>
```

## Image

![alt text](./dialog.jpg)

## Sample Code

```jsx
<DialogBox
  open={open}
  handleClose={handleClose}
  closeIcon={<HighlightOffIcon />}
  title='Upload Box'
  maxWidth='sm'
  Body={
    <Box>
      <Typography>Duis mollis, wqrhdqwifoqwjf</Typography>
    </Box>
  }
  footerComponent={
    <Box>
      <Button>Disagree</Button>
      <Button>Agree</Button>
    </Box>
  }
/>
```

## Props

| **Prop**                | **Type**          | **Description**                                     | **Default** |
| ----------------------- | ----------------- | --------------------------------------------------- | ----------- |
| **className**           | `string`          | The additional CSS class for styling the dialog.    | -           |
| **sx**                  | `SxProps<Theme>`  | Custom styling using the Theme UI system.           | -           |
| **title**               | `React.ReactNode` | The title of the dialog.                            | -           |
| **titleStyle**          | `SxProps`         | Custom styling for the title element.               | -           |
| **Body**                | `React.ReactNode` | The content of the dialog body.                     | -           |
| **open**                | `boolean`         | A boolean indicating whether the dialog is open.    | -           |
| **handleClose**         | `() => void`      | A function to handle the closing of the dialog.     | -           |
| **closeIcon**           | `React.ReactNode` | An icon element for closing the dialog.             | -           |
| **dialogmodalBoxStyle** | `SxProps`         | Custom styling for the modal box.                   | -           |
| **dialogBodyStyle**     | `SxProps`         | Custom styling for the dialog body.                 | -           |
| **footerComponent**     | `React.ReactNode` | The content of the dialog footer.                   | -           |
| **maxWidth**            | `any`             | Change the width of the dialog.                     | -           |
| **id**                  | string            | ""                                                  | Set string  |
| **titleVariant**        | `any`             | Custom varoant for the dialog title.                | -           |
| **isCloseIcon**         | `boolean`         | A boolean indicating whether the close icon is need | -           |
| **closeBtnStyle**       | `SxProps`         | Custom styling for the close button style           | -           |