Search code examples
sweetalertsweetalert2

Change the position of buttons to be vertical rather than horizontal

Is there a way to change the position or alignment of the buttons to be vertical instead of horizontal? I looked around for but was unable to find anything concrete except for hints at changing the CSS. This option however seems very cumbersome and isn't sure shot way to work.

Can anyone help me out here please?

Solution

  • Here you go:

    Swal.fire({
  title: 'SweetAlert2 Vertical Buttons',
  showCancelButton: true,
  customClass: {
    actions: 'vertical-buttons',
    cancelButton: 'top-margin'
  }
})
    .vertical-buttons {
  flex-direction: column;
}

.top-margin {
  margin-top: .5em;
}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>