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.

Bison

set showConfirmButton:false in your configuration. Link to the Documentation – Eanes

swal({ content: 'Hello Test', button: false, }) – Valentijn

Answer 1

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

Deaminate

Worked with my app: angular2 + sweetalert2, saved my time! :) – Navarino

Answer 2

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

Moises

This is the best answer! – Dixon

Answer 3

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

Hufford

Answer 4

Use closeOnClickOutside: false It works for me.

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

Welton

Answer 5

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>

Ventose

Answer 6

SWEET ALERT 2 | 2022 UPDATE

Swal.fire({
    ...
    showConfirmButton: false, //hide OK button
    allowOutsideClick: false, //optional, disable outside click for close the modal
    ...
});

As new documentation here.

Gallopade

Answer 7

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

        });
}

Merthiolate

Answer 8

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

{
  buttons: false,
}

Palembang

Answer 9

Try setting the showConfirmButton property to false.

Look at their docs

Jolly

Answer 10

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!!!

Arakawa

Answer 11

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

Nicoline

Answer 12

Header Part:

<link rel="stylesheet" href="https://sweetalert2.github.io/styles/bootstrap4-buttons.css">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Body Part Add A Button:

<a href="" id="delete" class="btn btn-danger">Delete</a>

jQuery Part:

$(document).on("click", "#delete", function (e) {
        e.preventDefault();
        var link = $(this).attr("href"); const swalWithBootstrapButtons = swal.mixin({   customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger'   },   buttonsStyling: false }) swalWithBootstrapButtons.fire({   title: 'Are you sure?',   text: "You won't be able to revert this!",   icon: 'warning',   showCancelButton: true,   confirmButtonText: 'Yes, delete it!',   cancelButtonText: 'No, cancel!',   reverseButtons: true }).then((result) => {   if (result.isConfirmed) {
    swalWithBootstrapButtons.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )   } else if (
    /* Read more about handling dismissals below */
    result.dismiss === swal.DismissReason.cancel   ) {
    swalWithBootstrapButtons.fire(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )   } }) });

Silvern