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	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.
tabIndex: number	`0`	Value of the tabindex given to the close 'x' button. Note that values greater than 0 are strongly discouraged.
children: node		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.

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