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