The Popconfirm-modal in Ant Design has the Confirm ("Yes"-)-Button preselected when the modal-window opens.

Source-code for the modal:

import { Popconfirm, message } from 'antd';

function confirm(e) {
  console.log(e);
  message.success('Click on Yes');
}

function cancel(e) {
  console.log(e);
  message.error('Click on No');
}

ReactDOM.render(
  <Popconfirm title="Are you sure delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No">
    <a href="#">Delete</a>
  </Popconfirm>
, mountNode);

Documentation and live-demo here: Ant Design Documentation

Is there a way to change the described default-behaviour?

Precisely: Is there a way to define the Cancel (respectively "No"-)-Button as preselected when the Modal appears?

The Popconfirm-modal in Ant Design has the Confirm ("Yes"-)-Button preselected when the modal-window opens.

Source-code for the modal:

import { Popconfirm, message } from 'antd';

function confirm(e) {
  console.log(e);
  message.success('Click on Yes');
}

function cancel(e) {
  console.log(e);
  message.error('Click on No');
}

ReactDOM.render(
  <Popconfirm title="Are you sure delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No">
    <a href="#">Delete</a>
  </Popconfirm>
, mountNode);

Documentation and live-demo here: Ant Design Documentation

Is there a way to change the described default-behaviour?

Precisely: Is there a way to define the Cancel (respectively "No"-)-Button as preselected when the Modal appears?

• javascript
• reactjs
• antd

Share Improve this question Follow asked Feb 20, 2018 at 12:59 cluster1cluster1 5,85877 gold badges3838 silver badges5959 bronze badges 2

• What do you mean with "preselected" ? it's preselected to none. do you want to invert the button with primary (blue) color to the "cancel" button? – Yichz Commented Feb 21, 2018 at 23:25
• @Kossel Yes. Exactly. I like to have the cancel-button (as the more harmless action) to be blue. And the harmful action NOT highlighted when the window appears. – cluster1 Commented Feb 22, 2018 at 10:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can only get half-way I am afraid.

If you provide an okType="default" property, the "Yes" button will no longer have type="primary", and thus look just like the "No" button.

However there is no support for a corresponding cancelType property, which means you are not able to make the "No" button blue.

This does feel like a slightly limping API, so you might have success filing a PR implementing cancelType. Should be a very simple 3-line patch against https://github./ant-design/ant-design/blob/master/ponents/popconfirm/index.tsx