Customizing the default button in Ant Design Popconfirm to display "Cancel" instead

When the Ant Design Popconfirm modal is opened, the Confirm ("Yes") button is already preselected.

https://i.stack.imgur.com/bs7W7.png

The code for the modal is as follows:

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

For more information and a live demo, check out the Ant Design Documentation.

Is there a way to change this default behavior?

Specifically, is it possible to have the Cancel ("No") button preselected when the Modal appears?

Answer №1

It seems that you can only reach halfway.

By adding an okType="default" property, the "Yes" button will no longer stand out as primary, appearing similar to the "No" button.

Unfortunately, there is no option for a corresponding cancelType property, preventing the customization of the "No" button's color.

This API might feel slightly limited, but proposing a PR to introduce the cancelType feature could be a straightforward 3-line patch against https://github.com/ant-design/ant-design/blob/master/components/popconfirm/index.tsx

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I would appreciate your assistance with the hide button

Is there a way to hide a button after clicking on it? I would greatly appreciate your help! ...

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Is it possible to declare a value in variable A and then access that value as an id in variable B using the method getElementById()? var A = 10; var B = document.getElementById(A); console.log(B); ...

Unexplainable space or padding issue detected in OwlCarousel grid gallery

There seems to be an unusual gap or margin at the bottom of each row section in this portfolio grid gallery that's running in OwlCarousel. You can view an example here. https://i.stack.imgur.com/NHOBd.png I've spent a lot of time trying to solv ...

Can someone please guide me on how to transfer information from a material ui datagrid Row to a form input?

I need assistance. I have a table that holds user data and I want to create a functionality where clicking on the edit button opens a dialogue box with a form pre-filled with the user's initial data. However, I'm currently only able to pass the u ...

How to use jQuery Animate to create a step-by-step animation with image sprites?

I'm working on creating an image sprite using jQuery and I'm curious if it's feasible to animate it in steps rather than a linear motion. I initially tried using CSS3 animations, but since IE9 is a requirement, the animations didn't wor ...

Exploring the contrast between materialize-css and material UI libraries

After exploring the home pages of materializecss and materialUI, I noticed that materializecss describes itself as a modern responsive front-end framework based on Material Design, while materialUI mentions React components that implement Google's Mat ...

Having trouble adding/removing/toggling an element class within a Vue directive?

A successful demonstration can be found at: https://jsfiddle.net/hxyv40ra However, when attempting to incorporate this code within a Vue directive, the button event triggers and the console indicates that the class is removed, yet there is no visual chang ...

Angular Material's md-checkbox is a required component

I am working on a form that consists of checkboxes representing the days of the week. When the user hits submit without selecting any checkboxes, I want an error message to appear. Here is the HTML code snippet that I have: <form id="addEditForm" nam ...

Deployment to DigitalOcean fails due to GitHub action error

I'm encountering an issue during the deployment process to DigitalOcean via github actions and I can't figure out why it's throwing an error related to python. Could this be a result of the docker images I'm utilizing? Despite my attemp ...

TS type defined by JS constants

I am currently working on a project that involves both JavaScript and TypeScript. I am trying to find a solution to reduce code duplication when using JavaScript string constants by converting them into TypeScript types. For example, let's say I have ...

What is the best way to achieve a full width table in an HTML format on a smartphone browser?

Apologies for my limited English proficiency. I am currently working on creating a horizontal scrollable table in HTML. My goal is to make the width of the table span beyond the browser's viewing area, so that sticky cell functionality can be implem ...

Getting Started with Styling in React Using Styled Components

I seem to be having trouble with styled components; something must be off in my setup. Here's the component I'm working with: import React from 'react'; import styled from 'styled-components'; const Wrapper = styled.div` d ...

The server's delayed response caused the jQuery ajax request to be aborted

Encountering delayed AJAX response from the PHP server upon aborting the AJAX request. Currently utilizing the CodeIgniter framework for the server script. Javascript Code: cblcurrentRequest = $.ajax({ url: baseurl + 'Login/getChannelBra ...

The issue with Firefox's DOMContentLoaded event

After creating a script that interacts with the Dom, I noticed that it needs to wait until the Dom is ready before executing each operation. My intention is to make this script usable in two ways: Include it in the head tag, ensuring it loads before the ...

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

The React app was successfully deployed to localhost:3000, but when attempting to access it, the message "This site can't be reached" is displayed. Strangely, the terminal confirms that the app is indeed

I've checked my code thoroughly, but when I deploy it to localhost, something seems off. Even after disabling all the components and running npm install, the issue persists. https://i.stack.imgur.com/i04eY.png Oddly enough, everything seems fine in ...

Implementing Dark Mode in Next.js with Material UI using local storage

Having trouble implementing dark mode in a Next.js app with MUI. The issue is that the dark mode settings are not persistent after being set. I am using createContext to manage state as the toggle button is within a component. Upon toggling, the state swi ...

Is there a way for me to reach a parent instance of a class from a child instance?

I am currently working on a project that involves a class called "Main" with an instance named "main". This "main" instance includes two properties from other classes, referred to as "player" and "background". My goal is to have the child instances interac ...

Learning how to handle URLEncoded format in Vue JS

Seeking guidance on how to handle URL Encoded format in postman to send data to my Vue JS app. Using the encoded format shown below, what npm package should I utilize for this task? https://i.stack.imgur.com/sBkXi.png ...

Is there a way to eliminate curly braces from JSON strings with a regular expression?

Hello, I am working with a JSON file and I need to manipulate the content of the chapters array. Specifically, I want to remove the curly braces from inside the strings but only if they contain more than three words (two spaces). Is it achievable using Reg ...