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

reactjs antd
soulmachine picture soulmachine · Nov 20, 2016 · Viewed 10.9k times · Source

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

Andre Lee picture Andre Lee · Nov 20, 2016

I'm not sure what you exactly want to do. But according to the doc. You can customize your footer by using an attribute footer for Modal.

And you just have to set both of them to null to not showing those two buttons. (And remove the onOk and onCancel attributes if you don't need them anymore.)

Here is a demo: 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>

And if you want to do Login and close the Modal by clicking one button, you can also check the demo I wrote above.

<Modal
  visible={this.state.visible}
  title="Title"
  footer={null}
>
  <div>
    Test For No TWO buttons on the footer.
  </div>
  <div>
    <Button type="ghost" onClick={this.handleClick}>Login</Button>
  </div>
</Modal>

Sorry for that I didn't update this answer for a while. antd updated their document and said we can just use footer={null} currently.

Related questions

How to customize Ant.design styles

Who knows how to customize Ant.design styles in proper way? For example, I want to change the default backgroundColor and height of Header section: import React, { Component } from 'react'; import { Form, Layout } from 'antd'; const { Header, Footer, Sider, Content } = …

Read More
Violation Forced reflow while executig Javascript in console when tooltip appear on slider handle

I have a web page with some elements and Ant.design slider present too. Slider values is controlled by React state. When slider tooltip is turn on, slider is very slow down and in console I see a message [Violation] …

Read More
how to get field value on change for FormItem in antd

I am having a hard time with antd's form. I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly. say this is the item …

Read More