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?

Edit: How do I display either of the buttons. Just "Ok" or "Cancel" button but not both? — Vikas Yadav, Apr 28 '18 at 17:51

Andre Lee · Accepted Answer · 2021-08-31T11:30:13.290

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

How to hide modal-header's close button? – MTM Jun 22 '20 at 14:49 — MTM, Jun 22 '20 at 14:49
@MTM Maybe you can try "closeIcon" from the API doc? – Andre Lee Nov 06 '20 at 03:19 — Andre Lee, Nov 06 '20 at 03:19

score 37 · Answer 2 · answered Dec 21 '19 at 12:07

37

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

answered Dec 21 '19 at 12:07

Mussa Charles

4,014
2
29
24

1

This is exactly what I was looking for... Thanks – Michael K Aug 18 '21 at 14:05
3

`okButtonProps={{ style: { display: 'none' } }}` to remove ok button – Tarish Jan 15 '22 at 10:20

score 9 · Answer 3 · answered Jan 26 '17 at 13:24

9

You can do it by footer={null}

answered Jan 26 '17 at 13:24

afc163

1,628
1
23
35

2

Thanks. That removes the footer all together along with border. Awesome! – mike123 Jan 27 '17 at 21:24
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 – Peter Hassaballah Oct 23 '21 at 15:50

score 7 · Answer 4 · answered Jan 15 '22 at 10:28

7

to remove

footer -> footer={null}

close Icon -> closable={false}

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

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

answered Jan 15 '22 at 10:28

Tarish

468
8
8

close Icon -> closable={false} Worked for me – Musadul Islam Jul 24 '23 at 05:19

score 5 · Answer 5 · answered Apr 01 '21 at 18:30

You can hide both Ok and Cancel button by:

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

OR

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

score 3 · Answer 6 · answered Nov 15 '20 at 12:26

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;

score 2 · Answer 7 · answered Dec 13 '20 at 04:33

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
    },
  });

score 1 · Answer 8 · answered Aug 17 '18 at 08:50

1

you can check here

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

answered Aug 17 '18 at 08:50

vipafo

11
1

score 1 · Answer 9 · answered Mar 19 '21 at 15:37

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>

score 0 · Answer 10 · answered Nov 26 '19 at 06:54

0

pass footer= {null} in the Modal props

answered Nov 26 '19 at 06:54

Bishnu Lama

1
1

score 0 · Answer 11 · answered Feb 23 '21 at 14:22

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>

score 0 · Answer 12 · edited Oct 07 '22 at 22:55

0

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

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

edited Oct 07 '22 at 22:55

user16217248

3,119
19
19
37

answered Oct 01 '22 at 02:51

Nur Amsyari

23
2
10

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

12 Answers12