Remove "OK" button from sweet alert dialog

Question

I am using javascript sweetalert2 library.

I want to remove the OK button from the alert box but I did not find any property for not to display this button.

I am using the timer property timer:1000 for closing the alert in one second. So, I don't think there is a use of the ok button in this matter.

set `showConfirmButton:false` in your configuration. [Link to the Documentation](https://limonte.github.io/sweetalert2/#allow-enter-key) — haxxxton, Feb 23 '17 at 05:52

score 52 · Accepted Answer · edited Mar 14 '17 at 00:10

52

You can use these properties:

showCancelButton: false, // There won't be any cancel button
showConfirmButton: false // There won't be any confirm button

Like This

swal({
  title: 'Auto close alert!',
  text: 'I will close in 2 seconds.',
  timer: 2000,
  showCancelButton: false,
  showConfirmButton: false
}).then(
  function () {},
  // handling the promise rejection
  function (dismiss) {
    if (dismiss === 'timer') {
      //console.log('I was closed by the timer')
    }
  }
)

edited Mar 14 '17 at 00:10

Player1

1,561
18
31

answered Feb 23 '17 at 05:57

Viplock

2,976
22
30

1

Worked with my app: angular2 + sweetalert2, saved my time! :) – amrendra Sep 08 '17 at 05:28

score 22 · Answer 2 · answered Apr 06 '18 at 15:00

22

Update 4/6/2018

showCancelButton and showConfirmButton are no longer needed. Instead, you can set buttons: true to show both buttons, or buttons: false to hide all buttons. By default, only the confirm button is shown.

So now instead of doing

showCancelButton: false;

showConfirmButton: false;

Just do

buttons: false;

Guides

answered Apr 06 '18 at 15:00

NewBie

1,334
7
15

3

This is the best answer! – Gina Gina Oct 10 '18 at 06:52

score 5 · Answer 3 · answered Feb 23 '17 at 05:58

5

You need to set showConfirmButton:false in your configuration.

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showConfirmButton:false,
  confirmButtonText: 'Yes, delete it!'
})

Here's the fiddle

answered Feb 23 '17 at 05:58

Saurabh Sharma

2,364
4
18
36

score 3 · Answer 4 · edited Nov 01 '17 at 16:14

This works for me: $(".confirm").attr('disabled', 'disabled');

My function:

function DeleteConfirm(c){
  swal({   
            title: "Want to delete this item?",   
            text: "You will not be able to undo this action!",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            closeOnConfirm: false 
        }, function(){ 
          $(".confirm").attr('disabled', 'disabled'); 

        });
}

score 2 · Answer 5 · edited Apr 02 '20 at 10:42

2

swal({

    title: "Success",
    text: "Permissions assigned Successfully",
    icon: "success",
    closeOnClickOutside: false,
})

Use closeOnClickOutside: false, It works for me.

edited Apr 02 '20 at 10:42

Saurabh Sharma

2,364
4
18
36

answered May 28 '18 at 06:31

Toqeer Chaudhary

41
1
6

score 2 · Answer 6 · answered May 01 '20 at 03:22

2

This accepted answer has been deprecated. Here is how you can hide or remove buttons in SweetAlert2.

{
  buttons: false,
}

answered May 01 '20 at 03:22

kaleazy

4,966
2
40
47

score 0 · Answer 7 · answered Feb 23 '17 at 05:55

0

Try setting the showConfirmButton property to false.

Look at their docs

answered Feb 23 '17 at 05:55

the_lost_one

127
9

score 0 · Answer 8 · answered Sep 05 '18 at 11:36

0

Below code works for me

I have only set buttons: false;

and update

swal({
    title: 'Auto close alert!',
    text: 'I will close in 2 seconds.',
    timer: 2000,
    showCancelButton: false,
    showConfirmButton: false
});

answered Sep 05 '18 at 11:36

Suhas Bachhav

283
1
6
28

Penny Liu · Answer 9 · 2020-03-20T02:36:07.090

One more way to do the same.

Swal.fire({
  type: 'error',
  title: 'Cancelled',
  text: 'Your offer is safe ',
  showConfirmButton: false,
  timer: 2000
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

Upgrading to v9.x of SweetAlert2.

Breaking change - rename type to icon

Swal.fire({
  icon: 'error',
  title: 'Cancelled',
  text: 'Your offer is safe ',
  showConfirmButton: false,
  timer: 2000
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

score -1 · Answer 10 · answered May 13 '17 at 15:25

Before adding any buttons,clear all the buttons and then re-add them like(assuming the Alert name is 'A') -

A.getButtonTypes().clear();
ButtonType OpenStorage=new ButtonType("Open Storage");
A.getButtonTypes().addAll(OpenStorage,ButtonType.CANCEL,ButtonType.NEXT);

Hope it'll help!!!

Remove "OK" button from sweet alert dialog

10 Answers10