Skip to content

Dialog Component

Description

The Dialog component is a modal dialog that appears over the main content. It supports customizable backdrop behavior, ESC key closing, and scroll options.

Styled Subcomponents

Component Description
Dialog_Title The title of the dialog.
Dialog_Content The main content area of the dialog.
Dialog_Actions A section for placing action buttons.

Props

Prop Type Default Description
open boolean false Controls whether the dialog is visible.
onClose () => void undefined Callback function when the dialog is closed.
maxWidth string "600px" The maximum width of the dialog.
disableBackdropClick boolean false Prevents closing when clicking the backdrop.
closeOnEsc boolean true Allows closing the dialog by pressing ESC.
scroll "paper" , "body" "paper" Controls the scrolling behavior inside the dialog.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Dialog, Button, Dialog_Title, Dialog_Content, Dialog_Actions } from "@nomana-it/liberty-core"
import { useState } from "react";
import { t } from "i18next";
import { LYCancelIcon } from "@ly_styles/icons";

export const DialogExample = () => {
  const [open, setOpen] = useState(false);

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <Dialog open={open} onClose={handleClose} maxWidth="500px" closeOnEsc>
        <Paper_Popup>
            <Dialog_Title>Dialog Title</Dialog_Title>
            <Dialog_Content>
            This is a simple dialog content area.
            </Dialog_Content>
            <Dialog_Actions>
            <Button variant="outlined" onClick={handleClose} startIcon={LYCancelIcon}>
                {t('button.close')}
            </Button>
            </Dialog_Actions>
        </Paper_Popup>
      </Dialog>
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core