How to hide the OK and Cancel buttons of antd Modal?

If you want to only hide a cancel button at the bottom and utilize onCancel for the X button at the top right corner then simply hide the cancel button like so: -

<Modal
    cancelButtonProps={{ style: { display: 'none' } }}
/>


You can do it by footer={null}


[Updated] I'm not sure what you exactly want to do. But according to the doc. You can customize your footer by using the attribute footer for Modal.

According to the updated document (Aug 31, 2021), we only need to use footer={null} and don't have to use footer={null, null} anymore.

Here is the sample: https://codepen.io/andretw/pen/RwbBYpb

<Modal
  visible={this.state.visible}
  title="Title"
  //onOk={this.handleOk}
  //onCancel={this.handleCancel}
  footer={null}
>Test For No TWO buttons on the footer.</Modal>

BTW, if you want to do Login and close the Modal by clicking one button, you need to invoke the handler function (handleOk) and set the visible option to false inside of it. (Nowadays, antd has great documents and you can check them to find more examples. I wrote and rewrote this example since there were few examples doing that at that time.)

// A handler/callback function 
handleLogin = () => {
  this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
  }, 3000);
};

// Add a customized button to the footer
footer={[
  <Button key="submit" type="primary" loading={loading} onClick={this.handleLogin}>
  Login
  </Button>,
]}

Tags:

Reactjs

Antd