CODEWITHSUNDEEP
reactjsantd
soulmachine
soulmachine

Reputation: 4153

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

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?

Upvotes: 50

Views: 93731

Answers (13)

Iryna Batvina
Iryna Batvina

Reputation: 1684

You can disabled button

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

Upvotes: 0

Nur Amsyari
Nur Amsyari

Reputation: 23

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

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

Upvotes: 0

Tarish
Tarish

Reputation: 616

to remove

footer -> footer={null}

close Icon -> closable={false}

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

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

Upvotes: 17

Andre Lee
Andre Lee

Reputation: 1320

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

Upvotes: 83

Victor Karangwa
Victor Karangwa

Reputation: 2216

You can hide both Ok and Cancel button by:

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

OR

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

Upvotes: 5

frozzen10
frozzen10

Reputation: 161

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>

Upvotes: 1

james akpan
james akpan

Reputation: 1

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>

Upvotes: 0

Senthuran
Senthuran

Reputation: 1837

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

Upvotes: 2

Majedur
Majedur

Reputation: 3242

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;

Upvotes: 4

Mussa Charles
Mussa Charles

Reputation: 4412

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

Upvotes: 49

Bishnu Lama
Bishnu Lama

Reputation: 1

pass footer= {null} in the Modal props

Upvotes: 0

vipafo
vipafo

Reputation: 11

you can check here

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

Upvotes: 1

afc163
afc163

Reputation: 1716

You can do it by footer={null}

Upvotes: 10

Related Questions