Revision history [back]

To modify the button color in antd Modal, you can use the "buttonProps" property on the button component. This property takes an object with any valid button props, such as "style" or "className". Here's an example code:

import { Modal, Button } from 'antd';

const ExampleModal = () => {
  const handleOk = () => {
    console.log('Clicked OK');
  };

  const handleCancel = () => {
    console.log('Clicked cancel');
  };

  return (
    <Modal
      title="Basic Modal"
      visible={true}
      onOk={handleOk}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          Cancel
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={handleOk}
          buttonProps={{ style: { backgroundColor: "red" } }}
        >
          Submit
        </Button>,
      ]}
    >
      <p>Some contents...</p>
    </Modal>
  );
};

In this example, the primary button's background color is set to red using the "style" property of the "buttonProps" object.