Trying to flip the position of the OK and Cancel buttons inside an Antd modal using okButtonProps and cancelButtonProps for button position

Question

I'm using Antd's Modal component for a project and I'm attempting to customize it.

I need to flip the position of the ok and cancel buttons so that the ok button is on the left and the cancel is on the right.

I'm also attempting to change the icon color to red.

I looked into the PR that someone just put in for the Antd project to add this required functionality, but I can't anything that actually describes what prop I need to use in order to change the positioning.

I have a CodeSandbox below with my progress thus far

import React from "react";
import ReactDOM from "react-dom";
import { Modal, Button } from "antd";
import "antd/dist/antd.css";

import "./styles.css";

function showConfirm() {
  Modal.confirm({
    title: "Do you Want to delete these items?",
    content: "Some descriptions",
    iconType: "close-circle",
    okButtonProps: {},
    cancelButtonProps: {},
    onOk() {
      console.log("OK");
    },
    onCancel() {
      console.log("Cancel");
    }
  });
}

function App() {
  return (
    <div className="App">
      <h1>Hello Modal</h1>
      <Button onClick={showConfirm}>Click For Modal</Button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Modal.method() is pretty limited, so I would build custom modal using footer property.

Anyway, you can just flip the buttons or edit the CSS class like @Rikin mentioned:

function showConfirm() {
  Modal.confirm({
    title: 'Do you Want to delete these items?',
    content: 'Some descriptions',
    iconType: 'close-circle',
    okText: 'Cancel',
    cancelText: 'OK',
    okButtonProps: {
      type: 'default'
    },
    cancelButtonProps: {
      type: 'primary'
    },
    onOk() {
      console.log('Cancel');
    },
    onCancel() {
      console.log('OK');
    }
  });
}