Dialog

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.

Props

Name	Type	Description	Default
isCloseVisible	`boolean`	If true, the close button will be visible.	`true`
onCloseClick	`() => void`	This function will be called when the user clicks the close button. The responsibility of hiding the dialog lies with the user.	-
onBackgroundClick	`() => void`	This function will be called when the on the background of the modal. The responsibility of hiding the dialog lies with the user.	-
overlay	`boolean`	If true, the dialog will be displayed over a darker background that covers the content behind.	`true`
Required children	`React.ReactNode`	Area within the dialog that can be used to render custom content. We strongly encourage users to not change the `tabindex` of the inner components or elements. This can lead to unpredictable behaviour for keyboard users, affecting the order of focus and focus locking within the dialog.	-
tabIndex	`number`	Value of the `tabindex` applied to the close button. Note that values greater than 0 are strongly discouraged. It can lead to unexpected behaviours with the focus within the dialog.	`0`

Examples

Basic usage

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

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

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

  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your data" onClick={handleClick} />
      {isDialogVisible && (
        <DxcDialog onCloseClick={handleClick}>
          <DxcInset space="1.5rem">
            Please enter your personal information.
          </DxcInset>
        </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 address" onClick={handleClick} />
      {isDialogVisible && (
        <DxcDialog onCloseClick={handleClick}>
          <DxcInset space="1.5rem">
            <DxcGrid gap="2rem">
              <DxcHeading level={2} text="Delivery address" weight="normal" />
              <DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="1rem">
                <DxcTextInput label="Street" size="fillParent" />
                <DxcTextInput label="City" size="fillParent" />
                <DxcGrid.Item column={{ start: 1, end: 3 }}>
                  <DxcTextInput label="State" size="fillParent" />
                </DxcGrid.Item>
              </DxcGrid>
              <DxcFlex justifyContent="flex-end" gap="0.5rem">
                <DxcButton label="Add client" onClick={handleClick} />
                <DxcButton label="Cancel" onClick={handleClick} mode="text" />
              </DxcFlex>
            </DxcGrid>
          </DxcInset>
        </DxcDialog>
      )}
    </DxcInset>
  );
}

() => {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const handleClick = () => {
    setDialogVisible(!isDialogVisible);
  };
  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your address" onClick={handleClick} />
      {isDialogVisible && (
        <DxcDialog onCloseClick={handleClick}>
          <DxcInset space="1.5rem">
            <DxcGrid gap="2rem">
              <DxcHeading level={2} text="Delivery address" weight="normal" />
              <DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="1rem">
                <DxcTextInput label="Street" size="fillParent" />
                <DxcTextInput label="City" size="fillParent" />
                <DxcGrid.Item column={{ start: 1, end: 3 }}>
                  <DxcTextInput label="State" size="fillParent" />
                </DxcGrid.Item>
              </DxcGrid>
              <DxcFlex justifyContent="flex-end" gap="0.5rem">
                <DxcButton label="Add client" onClick={handleClick} />
                <DxcButton label="Cancel" onClick={handleClick} mode="text" />
              </DxcFlex>
            </DxcGrid>
          </DxcInset>
        </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} />
      {isDialogVisible && (
        <DxcDialog onBackgroundClick={handleClick} isCloseVisible={false}>
          <DxcInset space="1.5rem">
            Please enter your personal information.
          </DxcInset>
        </DxcDialog>
      )}
    </DxcInset>
  );
}

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

Props
Examples

Edit this page on GitHub

Report an issue on GitHub

Date Input