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?

Felly

Edit: How do I display either of the buttons. Just "Ok" or "Cancel" button but not both? – Cepeda

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

Duct

How to hide modal-header's close button? – Norton

@Norton Maybe you can try "closeIcon" from the API doc? – Duct

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

Forkey

This is exactly what I was looking for... Thanks – Idealism

okButtonProps={{ style: { display: 'none' } }} to remove ok button – Spiky

Any idea why: cancelButtonProps={{hidden: true}} is not doing the job?? – Idiosyncrasy

Answer 3

to remove

footer -> footer={null}

close Icon -> closable={false}

Ok button -> okButtonProps={{ style: { display: 'none' } }}

cancel button -> cancelButtonProps={{ style: { display: 'none' } }}

Spiky

close Icon -> closable={false} Worked for me – Kyla

Answer 4

You can do it by footer={null}

Dissertate

Thanks. That removes the footer all together along with border. Awesome! – Wergild

Thank this is the neatest way . Just make sure anyone reading this to leave the onCancel props so you can still close the modal by pressing escape – Frederigo

Answer 5

You can hide both Ok and Cancel button by:

<Modal
  footer={null}
...
>
...
</Modal>

OR

<Modal
 okButtonProps={{
          style: {
            display: "none",
          },
        }}
        cancelButtonProps={{
          style: {
            display: "none",
          },
        }}
...
>
...
</Modal>

Fluttery

Answer 6

In addition, you can also hide close icon and customize as your need.

<Modal
  visible={this.state.visible}
  title="Title"
  closable={false}
  footer={null}>
  <div>
    Test For No two buttons on the footer.
    And No One in header.
  </div>
  <div>
    <Button type="ghost" onClick={this.handleClick}>Login</Button>
  </div>
</Modal>

You can also use others control as necessary.

static propTypes: {
        prefixCls: PropTypes.Requireable<string>;
        onOk: PropTypes.Requireable<(...args: any[]) => any>;
        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
        okText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        cancelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        centered: PropTypes.Requireable<boolean>;
        width: PropTypes.Requireable<React.ReactText>;
        confirmLoading: PropTypes.Requireable<boolean>;
        visible: PropTypes.Requireable<boolean>;
        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        closable: PropTypes.Requireable<boolean>;
        closeIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    handleCancel: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    handleOk: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    renderFooter: (locale: ModalLocale) => JSX.Element;
    renderModal: ({ getPopupContainer: getContextPopupContainer, getPrefixCls, }: ConfigConsumerProps) => JSX.Element;
    render(): JSX.Element;

Braun

Answer 7

In order to hide the cancel button in Modal.confirm pass display as none to the cancelButtonProps. Please refer the below code.

 Modal.confirm({
    title: 'Confirm Title',
    content: 'ABC.....',
    okText:'OK',
    cancelButtonProps : { style: { display: 'none' } },  
    onOk: () => {
      // code to be implemented
    },
  });

In order to disable the cancel button pass disabled as true for the cancelButtonProps.

 Modal.confirm({
    title: 'Confirm Title',
    content: 'ABC.....',
    okText:'OK',
    cancelButtonProps : { disabled: true},  
    onOk: () => {
      // code to be implemented
    },
  });

Mcarthur

Answer 8

you can check here

<Model
  footer={null}
>
...
</Model>

Paulsen

Answer 9

if you only want to remove buttons from modal then all you need is pass to Modal props

<Modal footer={null} {...rest}></Modal>

if you also want to disable close posibility then you need to pass also

<Modal closable={false} footer={null} {...rest}></Modal>

Internationalist

Answer 10

pass footer= {null} in the Modal props

President

Answer 11

Or you can use the footer props.

    <Modal 
      footer={[]}
    >
    <ShoutOutModal />
  </Modal>  

and if you want to return just the cancel button you can do

      <Modal 
    
    footer={[<Button>Cancel</Button>]}
  >
    <ShoutOutModal />
  </Modal>  

Tman

Answer 12

Maybe you just want to disable the OK button, when the state is loading.

<Modal
  okButtonProps={{
    style: {
      cursor: loading ? 'not-allowed' : 'default',
    },
  }}
></Modal>

Brackish

Answer 13

You can disabled button

okButtonProps={{
              disabled: true
            }}
cancelButtonProps={{
                  disabled: true
                }}

Love