Sweetalert2 - v9.5.4

Pro Component

Our Sweetalert2 Alerts are beautiful, responsive, customisable, accessible replacements for Javascript’s popup boxes.
Keep reading our Sweetalert2 Alerts examples and learn how to use this plugin.

Usage

If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colours for the plugin provided by Tristan Edwards. If you want to see the full documentation, please check out this page.

Initialization

<script>
// js import
import swal from 'sweetalert2'

// style import
import 'sweetalert2/dist/sweetalert2.css'
</script>

Examples

<base-button type="primary" @click="showSwal('basic')">Basic alert</base-button>
<base-button type="info" @click="showSwal('info')">Info alert</base-button>
<base-button type="success" @click="showSwal('success')">Success alert</base-button>
<base-button type="warning" @click="showSwal('warning')">Warning alert</base-button>
<base-button type="default" @click="showSwal('question')">Question</base-button>


<script>
...
showSwal(type) {
  if (type === 'basic') {
    swal.fire({
      title: `Here's a message!`,
      text: `A few words about this sweet alert ...`,
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-primary'
    });
  } else if (type === 'info') {
    swal.fire({
      icon: 'info',
      title: `Info`,
      text: `A few words about this sweet alert ...`,
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-info'
    });
  } else if (type === 'success') {
    swal.fire({
      title: `Success`,
      text: 'A few words about this sweet alert ...',
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-success',
      icon: 'success'
    });
  } else if (type === 'warning') {
    swal.fire({
      title: `Warning`,
      text: 'A few words about this sweet alert ...',
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-warning',
      icon: 'warning'
    })
  } else if (type === 'question') {
    swal.fire({
      title: `Are you sure?`,
      text: 'A few words about this sweet alert ...',
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-default',
      icon: 'question'
    })
  }
  ...
</script>

Advanced

<script>
...
Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#f5365c',
  cancelButtonColor: '#f7fafc',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})
...
let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <b></b> milliseconds.',
  timer: 2000,
  timerProgressBar: true,
  onBeforeOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      const content = Swal.getContent()
      if (content) {
        const b = content.querySelector('b')
        if (b) {
          b.textContent = Swal.getTimerLeft()
        }
      }
    }, 100)
  },
  onClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  /* Read more about handling dismissals below */
  if (result.dismiss === Swal.DismissReason.timer) {
    console.log('I was closed by the timer')
  }
})
...
Swal.fire({
  title: 'Sweet!',
  text: 'Modal with a custom image.',
  imageUrl: 'https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/img-1-1000x600.jpg',
  imageWidth: 400,
  imageHeight: 200,
  imageAlt: 'Custom image',
})
...
</script>