Dialog

Ready

A modal dialog is a message box or child window that requires user interaction before returning to the parent window. These boxes appear on top of the open parent window that is currently displayed on the screen.

Code

Usage

Specifications

Props

warning

The padding prop has been deprecated. Consider using layout components like the Inset for the same purpose.

Name	Default	Description
isCloseVisible: boolean	`true`	If true, the close 'x' button will be visible.
onCloseClick: function		This function will be called when the user clicks the close 'x' button. The responsibility of hiding the dialog lies with the user.
onBackgroundClick: function		This function will be called when the user clicks background. The responsibility of hiding the dialog lies with the user.
overlay: boolean	`true`	If true, the dialog will be displayed over a darker background that covers the content behind.
padding: string \| object	`'small'`	Deprecated Size of the padding to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
tabIndex: number	`0`	Value of the tabindex given to the close 'x' button.
children: node		The area inside the dialog. This area can be used to render custom content.

Examples

Basic usage

() => {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const handleClick = () => {
    setDialogVisible(!isDialogVisible);
  };

  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
      {isDialogVisible && (
        <DxcDialog onCloseClick={handleClick}>
          Please enter your personal information.
        </DxcDialog>
      )}
    </DxcInset>
  );
}

() => {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const handleClick = () => {
    setDialogVisible(!isDialogVisible);
  };

  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
      {isDialogVisible && (
        <DxcDialog onCloseClick={handleClick}>
          Please enter your personal information.
        </DxcDialog>
      )}
    </DxcInset>
  );
}

With content

This is an example of how to use the Dialog to display multiple inputs and buttons to collect information.

() => {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const handleClick = () => {
    setDialogVisible(!isDialogVisible);
  };
  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
      {isDialogVisible && (
        <DxcDialog onCloseClick={handleClick}>
          <DxcInset top="1.5rem" bottom="1.5rem">
            <DxcFlex gap="2rem">
              <DxcTextInput label="Name" />
              <DxcTextInput label="Last name" />
            </DxcFlex>
          </DxcInset>
          <DxcInset bottom="4rem">
              <DxcTextInput label="Address" size="fillParent" />
          </DxcInset>
          <DxcFlex justifyContent="center">
            <DxcButton label="Add client" onClick={handleClick} />
            <DxcButton label="Cancel" onClick={handleClick} mode="text" />
          </DxcFlex>
        </DxcDialog>
      )}
    </DxcInset>
  );
}

() => {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const handleClick = () => {
    setDialogVisible(!isDialogVisible);
  };
  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
      {isDialogVisible && (
        <DxcDialog onCloseClick={handleClick}>
          <DxcInset top="1.5rem" bottom="1.5rem">
            <DxcFlex gap="2rem">
              <DxcTextInput label="Name" />
              <DxcTextInput label="Last name" />
            </DxcFlex>
          </DxcInset>
          <DxcInset bottom="4rem">
              <DxcTextInput label="Address" size="fillParent" />
          </DxcInset>
          <DxcFlex justifyContent="center">
            <DxcButton label="Add client" onClick={handleClick} />
            <DxcButton label="Cancel" onClick={handleClick} mode="text" />
          </DxcFlex>
        </DxcDialog>
      )}
    </DxcInset>
  );
}

With background click event

Example of a dialog that will close when the user clicks anywhere outside it.

() => {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const handleClick = () => {
    setDialogVisible(!isDialogVisible);
  };
  
  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
      {isDialogVisible && (
        <DxcDialog onBackgroundClick={handleClick} isCloseVisible={false}>
          Please enter your personal information.
        </DxcDialog>
      )}
    </DxcInset>
  );
}

() => {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const handleClick = () => {
    setDialogVisible(!isDialogVisible);
  };
  
  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
      {isDialogVisible && (
        <DxcDialog onBackgroundClick={handleClick} isCloseVisible={false}>
          Please enter your personal information.
        </DxcDialog>
      )}
    </DxcInset>
  );
}

Props
Examples

Edit this page on GitHub

Date Input