Tailwind CSS Popconfirm

Basic example

Basic example of popconfirm usage

HTML
javascript

        
            
      <button
        type="button"
        data-te-ripple-init
        data-te-ripple-color="light"
        data-te-toggle="popconfirm"
        data-te-message="This is example"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
        Default
      </button>

        
            
      // Initialization for ES Users
      import {
        Popconfirm,
        initTE,
      } from "tw-elements";
      
      initTE({ Popconfirm });

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Display mode

You can choose between modal and inline to modify display mode.

HTML
javascript

        
            
      <button
        type="button"
        data-te-ripple-init
        data-te-ripple-color="light"
        data-te-toggle="popconfirm"
        data-te-popconfirm-mode="modal"
        class="mr-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
        Modal
      </button>
      <button
        type="button"
        data-te-ripple-init
        data-te-ripple-color="light"
        data-te-toggle="popconfirm"
        data-te-popconfirm-mode="inline"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
        Inline
      </button>

        
            
        // Initialization for ES Users
        import {
          Popconfirm,
          initTE,
        } from "tw-elements";
        
        initTE({ Popconfirm });

Icon example

To apply icon to message you need to use popconfirmIconTemplate option.

HTML
javascript
umd

ES UMD

        
            
      <button
        type="button"
        id="icon-example"
        data-te-ripple-init
        data-te-ripple-color="light"
        data-te-popconfirm-mode="inline"
        data-te-message="Icon example"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
        Icon
      </button>

        
            
      // Initialization for ES Users
      import { Popconfirm } from "tw-elements";
            
      const iconExample = document.getElementById("icon-example");
      new Popconfirm(iconExample, {
        popconfirmIconTemplate: `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
        </svg>
        `,
      });

        
            
      const iconExample = document.getElementById("icon-example");
      new te.Popconfirm(iconExample, {
        popconfirmIconTemplate: `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
        </svg>
        `,
      });

Inline positions

You can choose between different positions.

Available positions: top left; top; top right; right top; right; right bottom; bottom right; bottom; bottom left; left bottom; left; left top;

HTML
javascript

        
            
      <button
        type="button"
        data-te-ripple-init
        data-te-ripple-color="light"
        data-te-toggle="popconfirm"
        data-te-position="top left"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
        Top left
      </button>
      <button
        type="button"
        data-te-ripple-init
        data-te-ripple-color="light"
        data-te-toggle="popconfirm"
        data-te-position="top"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
        Top
      </button>
      <button
        type="button"
        data-te-ripple-init
        data-te-ripple-color="light"
        data-te-toggle="popconfirm"
        data-te-position="top right"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
        Top right
      </button>

        
            
      // Initialization for ES Users
      import {
        Popconfirm,
        initTE,
      } from "tw-elements";
      
      initTE({ Popconfirm });

If you are looking for more advanced options, try Bootstrap Popconfirm from MDBootstrap.

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Popconfirm, initTE } from "tw-elements";
        initTE({ Popconfirm });

        
            
        import "tw-elements";

Usage

Via data attributes

HTML

        
            
        <button
          type="button"
          data-te-ripple-init
          data-te-ripple-color="light"
          data-te-toggle="popconfirm"
          class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
          Default
        </button>

Via JavaScript

javascript
umd

ES UMD

        
            
        const myPopconfirm = new Popconfirm(document.getElementById('popconfirm'), options, classes);

        
            
        const myPopconfirm = new te.Popconfirm(document.getElementById('popconfirm'), options, classes);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-cancel-label="".

Name	Type	Default	Description
`cancelLabel`	String	`'Cancel'`	Text rendered under cancel button for screen readers.
`cancelText`	String	`'Cancel'`	Text of cancel button, if empty string - button doesn't render.
`confirmLabel`	String	`'Confirm'`	Text rendered under confirm button for screen readers.
`message`	String	`'Are you sure?'`	Message rendered in popconfirm.
`okText`	String	`'OK'`	Text of confirm button. If empty string, the default value of the button will be set to 'OK'.
`popconfirmIconTemplate`	String	``	Template of the icon in the popconfirm.
`popconfirmMode`	String	`'inline'`	Mode of display -> 'inline' or 'modal'
`position`	String	`'bottom'`	Sets position of the popconfirm element. Available positions: `top left; top; top right; right top; right; right bottom; bottom right; bottom; bottom left; left bottom; left; left top;`

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-te-class, as in data-te-class-backdrop="".

Name	Default	Description
`backdrop`	h-full w-full z-[1070] fixed top-0 left-0 bg-[#00000066] flex justify-center items-center	Backdrop element classes.
`body`	p-[1rem] bg-white rounded-[0.5rem] opacity-0 dark:bg-neutral-700	Popconfirm body element classes.
`btnCancel`	inline-block rounded bg-primary-100 px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200	Cancel button element classes.
`btnConfirm`	inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]	Confirm button element classes.
`btnsContainer`	flex justify-end space-x-2	Container of buttons element classes.
`fade`	transition-opacity duration-[150ms] ease-linear	Fade animation classes for popconfirm element.
`icon`	pr-2	Popconfirm icon element classes.
`message`	flex mb-3	Popconfirm message wrapper classes.
`messageText`	text-neutral-600 dark:text-white	Popconfirm message text classes.
`modal`	absolute w-[300px] z-[1080] shadow-sm rounded-[0.5rem]	Modal element classes for popconfirm.
`popover`	w-[300px] border-[1px] border-solid border-[#f5f5f5] rounded-[0.5rem] z-[1080] shadow-sm dark:border-0	Popover element classes for popconfirm.

Methods

Method	Description	Example
`getInstance`	Static method which allows you to get the popconfirm instance associated with a DOM element.	`Popconfirm.getInstance(myPopconfirmEl)`
`getOrCreateInstance`	Static method which returns the popconfirm instance associated to a DOM element or create a new one in case it wasn't initialized.	`Popconfirm.getOrCreateInstance(myPopconfirmEl)`
`dispose`	Destroys an element's popconfirm.	`myPopconfirm.dispose()`

javascript
umd

ES UMD

        
            
        const myPopconfirmEl = document.getElementById('myPopconfirm');
        const myPopconfirm = new Popconfirm(myPopconfirmEl);
        myPopconfirm.dispose();

        
            
        const myPopconfirmEl = document.getElementById('myPopconfirm');
        const myPopconfirm = new te.Popconfirm(myPopconfirmEl);
        myPopconfirm.dispose();

Events

Event type	Description
`cancel.te.popconfirm`	This event fires immediately when the popconfirm is closed without confirm button click.
`confirm.te.popconfirm`	This event fires immediately when the popconfirm is closed using confirm button.

JavaScript

        
            
        const myPopconfirm = document.getElementById('popconfirm');
        myPopconfirm.addEventListener('cancel.te.popconfirm', (e) => {
          // do something...
        });

Popconfirm

Basic example

Display mode

Icon example

Inline positions

Related resources

Popconfirm - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events