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

Question

I wrote a Signup component, which is basically as follows:

const Login = (
  <Modal>
    <NormalLoginForm/ 
     ...
    </NormalLoginForm >
  </Modal>
)

The NormalLoginForm component is from the official website here https://ant.design/components/form/

I don't need the two Buttons OK and Cancel on the Modal, how to hide the two buttons ?

Also are there any good examples about how to integrate login and signup buttons with the navigation menu?

Answer 1

[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>,
]}

Answer 2

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' } }}
/>

Answer 3

You can do it by footer={null}