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

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

• javascript
• css
• reactjs
• antd

4 Answers 4

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

Although PR is mentioned when I go look at the codebase, and PR there dont seem to be any option that does what it needs to. Probably author of the PR did not understand the requirement. You can mention on the comment as unresolved so that they reopen.

Until then possible solution that you can implement:

Edited snippet solution: https://codesandbox.io/s/epic-wave-p69yt

There's className property which is available as a prop that you can pass in to Modal, dont see any option to directly affecting position in of the buttons within the Modal.

I added this property in the component

className: "my-custom-class",

And added following CSS rule in styles.css:

.my-custom-class .ant-modal-confirm-btns .ant-btn{
  float: right;
  margin-left: 10px;
}

You can optimize however you want. This is just one-way to tackle using CSS affecting the modal.

If supplement the above, then you can use this option:

className: 'custom-confirm-styles',

Add next styles

 .custom-confirm-styles > .ant-modal-content > .ant-modal-body > .ant-modal-confirm-body-wrapper > .ant-modal-confirm-btns {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;
      column-gap: 8px;
    }

it will look like this:

enter image description here

If you want to change the icon color to red then the following answer will help .......... Modal.confirm will always have yellow color. In order to change the color into red you need to pass the color as red for the icon property. Please refer the below code.

import { CloseCircleFilled } from '@ant-design/icons';
...
...
 Modal.confirm({
    title: 'Confirm Title',
    content: 'ABC.....',
    okText:'OK',  
    icon: <CloseCircleFilled style={{ color: '#ff2a00' }} />,
    onOk: () => {
      // code to be implemented
    },
  });

The above solution worked for me.