Svelte Sweet Alerts

Pro Component

Our Svelte Sweet Alerts are beautiful, responsive, customisable, accessible replacements for Javascript’s popup boxes.
Keep reading our Svelte 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>
import Swal from "sweetalert2/dist/sweetalert2.js";
</script>

Examples

<script>

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

<BaseButton type="primary" on:click={() => showSwal('basic')}>
  Basic alert
</BaseButton>
<BaseButton type="info" on:click={() => showSwal('info')}>
  Info alert
</BaseButton>
<BaseButton type="success" on:click={() => showSwal('success')}>
  Success alert
</BaseButton>
<BaseButton type="warning" on:click={() => showSwal('warning')}>
  Warning alert
</BaseButton>
<BaseButton type="default" on:click={() => showSwal('question')}>
  Question
</BaseButton>

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>