brandv1.0
Utilities
Data Display
Data Entry
Feedback

Sweet Alert

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript`s popup boxes check documentation.

Sweet alert type 1

A Basic Message example.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        html: '<div class="d-flex align-items-center"><i class="ri-calendar-check-line me-2 fs-1 text-success"></i><h4 class="mb-0">You created a new event</h4></div>',
        customClass: {
          content: "p-0",
          actions: "justify-content-start",
        },
        width: 400,
        showConfirmButton: false,
        buttonsStyling: false,
      });
    }
  }
}
</script>
Sweet alert type 2

A title with a text under.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        html:
          '<div class="d-flex align-items-center"><i class="ri-checkbox-line me-2 fs-3 text-success"></i><h5 class="text-success mb-0">Your task has been added!</h5></div><p class="mt-2 text-start">Check your email for the confirmation. Dont forget to set the reminder in your task list</p>',
        customClass: {
          confirmButton: "btn btn-primary",
          actions: "justify-content-start w-100",
        },
        buttonsStyling: false,
      });
    }
  }
}
</script>
Sweet alert type 3

A modal with a title, an error icon, a text, and a footer.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        html: '<div class="avatar avatar-icon avatar-soft-danger mb-3"><span class="initial-wrap"><i class="ri-close-circle-fill"></i></span></div><div><h4 class="text-danger">Oops! API validation failed</h4><p class=" mt-2">Please add a valid format for API and try again.</p></div>',
        customClass: {
          container: "swal2-has-footer",
          confirmButton: "btn btn-primary",
        },
        buttonsStyling: false,
        footer: '<a href="#">Why do I have this issue?</a>',
      });
    }
  }
}
</script>
Sweet alert type 4

Custom HTML description and buttons with ARIA labels.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        title:
          '<span>Permanently Delete: <i class="ri-folder-5-fill text-warning px-2"></i>Roboto cheesecake</span>',
        html:
          '<p>You are about to permanently delete <a href="#">roboto-cheesecake</a> and all its content .You will not be able to recover this folder or its content from recycle bin. <strong>This operation can not be undone.</strong></p><form class="mt-3"><div class="form-group"><label class="form-label" for="inputText">Type "DELETE" to confirm</label><input type="text" id="inputText" class="form-control" aria-describedby="passwordHelpBlock"></div></form>',
        customClass: {
          container: "swal2-has-header",
          htmlContainer: "text-start",
          confirmButton: "btn btn-danger",
          actions: "w-100 justify-content-end mt-3",
          cancelButton: "btn btn-secondary me-2",
        },
        showCancelButton: true,
        reverseButtons: true,
        confirmButtonText: "Yes, delete it!",
        buttonsStyling: false,
      }).then((result) => {
        if (result.value) {
            this.$swal({
            html:
              '<div class="d-flex align-items-center"><i class="ri-delete-bin-5-fill me-2 fs-3 text-danger"></i><h5 class="text-danger">Your file has been deleted!</h5></div>',
            customClass: {
              confirmButton: "btn btn-primary",
              actions: "justify-content-start",
            },
            buttonsStyling: false,
          });
        }
      });
    }
  }
}
</script>
Sweet alert type 5

A custom positioned dialog.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        position: "top-end",
        html: '<h5 class="mb-1 text-start">Please login to continue</h5>',
        customClass: {
          container: "swal2-has-footer",
          footer: "justify-content-start",
        },
        showConfirmButton: false,
        footer: '<a href="#" class="btn btn-primary">Log In</a>',
      });
    },
  }
}
</script>
Sweet alert type 6

Custom animation with Animate.css .

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        html: '<div class="d-flex align-items-center"><div class="avatar avatar-icon avatar-soft-danger me-3"><span class="initial-wrap"><i class="ri-close-circle-fill"></i></span></div><div><h4 class="text-danger">Oops! API validation failed</h4><p>Please add a valid format for API and try again.</p></div></div>',
        customClass: {
          confirmButton: "btn btn-outline-secondary text-danger",
          cancelButton: "btn btn-outline-secondary",
          container: "swal2-has-bg",
          htmlContainer: "bg-transparent border-bottom text-start",
          actions: "w-100",
        },
        showCancelButton: true,
        buttonsStyling: false,
        showCloseButton: true,
        confirmButtonText: "TRY AGAIN",
        cancelButtonText: "CLOSE",
        reverseButtons: true,
      }).then((result) => {
        if (result.value) {
          this.$swal({
            html:
              '<div class="d-flex align-items-center"><i class="ri-delete-bin-5-fill me-2 fs-3 text-danger"></i><h5 class="text-danger">Your file has been deleted!</h5></div>',
            customClass: {
              content: "p-0 text-start",
              confirmButton: "btn btn-primary",
              actions: "justify-content-start",
            },
            buttonsStyling: false,
          });
        }
      });
    },
  }
}
</script>
Sweet alert type 7

A confirm dialog, with a function attached to the "Confirm"-button.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        html:
          '<div class="mb-3"><i class="ri-delete-bin-6-line fs-5 text-danger"></i></div><h5 class="text-danger">Delete Note ?</h5><p>Deleting a note will permanently remove from your library.</p>',
        customClass: {
          confirmButton: "btn btn-outline-secondary text-danger",
          cancelButton: "btn btn-outline-secondary text-gray",
          container: "swal2-has-bg",
          actions: "w-100",
        },
        showCancelButton: true,
        buttonsStyling: false,
        confirmButtonText: "Yes, Delete Note",
        cancelButtonText: "No, Keep Note",
        reverseButtons: true,
      }).then((result) => {
        if (result.value) {
          this.$swal({
            html:
              '<div class="d-flex align-items-center"><i class="ri-delete-bin-5-fill me-2 fs-3 text-danger"></i><h5 class="text-danger mb-0">Your file has been deleted!</h5></div>',
            customClass: {
              confirmButton: "btn btn-primary",
              actions: "justify-content-start w-100",
            },
            buttonsStyling: false,
          });
        }
      });
    },
  }
}
</script>
Sweet alert type 8

A message with a custom image.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
//image
import avatar1 from "~/assets/img/avatar1.jpg";

export default {
  methods: {
    showAlert() {
      this.$swal({
        title: "Sweet!",
        text: "Modal with a custom image.",
        imageUrl: avatar1,
        imageWidth: "auto",
        imageHeight: 150,
        imageAlt: "Custom image",
        customClass: {
          confirmButton: "btn btn-primary",
        },
        buttonsStyling: false,
      });
    },
  }
}
</script>
Sweet alert type 9

A message with auto close timer.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        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");
        }
      });
    },
  }
}
</script>
Sweet alert type 10

Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        title: "هل تريد الاستمرار؟",
        confirmButtonText: "نعم",
        cancelButtonText: "لا",
        showCancelButton: true,
        showCloseButton: true,
        customClass: {
          content: "p-0",
          confirmButton: "btn btn-primary me-2",
          cancelButton: "btn btn-secondary",
          container: "swal2-rtl",
        },
        buttonsStyling: false,
        showCancelButton: true,
      });
    },
  }
}
</script>
Sweet alert type 11

AJAX request example.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal({
        html: '<div class="avatar avatar-icon avatar-dark mb-3"><span class="initial-wrap "><i class="ri-github-fill"></i></span></div><h5 class="mb-1">Sumit you github user name</h5>',
        input: "text",
        inputAttributes: {
          autocapitalize: "off",
        },
        customClass: {
          confirmButton: "btn btn-primary me-2",
          cancelButton: "btn btn-secondary",
          input: "form-control w-auto mx-0",
        },
        buttonsStyling: false,
        showCancelButton: true,
        confirmButtonText: "Look up",
        showLoaderOnConfirm: true,
        preConfirm: (login) => {
          return fetch(`//api.github.com/users/${login}`)
            .then((response) => {
              if (!response.ok) {
                throw new Error(response.statusText);
              }
              return response.json();
            })
            .catch((error) => {
              Swal.showValidationMessage(`Request failed: ${error}`);
            });
        },
        allowOutsideClick: () => !Swal.isLoading(),
      }).then((result) => {
        if (result.value) {
          this.$swal({
            title: `${result.value.login}'s avatar`,
            imageUrl: result.value.avatar_url,
          });
        }
      });
    },
  }
}
</script>
Sweet alert type 12

Chaining modals (queue) example.

							
                                
<template>
  <div>
    <BButton variant="primary" @click="showAlert">Try Me</BButton>
  </div>
</template>

<script>
export default {
  methods: {
    async showAlert() {
      const steps = ["1", "2", "3"];
      const swalQueueStep = this.$swal.mixin({
        confirmButtonText: "Next &rarr;",
        cancelButtonText: " &larr; Forward",
        buttonsStyling: false,
        customClass: {
          content: "pa-0",
          confirmButton: "btn btn-primary",
          cancelButton: "btn btn-secondary me-2",
          input: "form-control w-auto",
        },
        progressSteps: steps,
        input: "text",
        inputAttributes: {
          required: true,
        },
        reverseButtons: true,
        validationMessage: "This field is required",
      });

      const values = [];
      let currentStep;

      for (currentStep = 0; currentStep < steps.length; ) {
        const result = await swalQueueStep.fire({
          title: `Question ${steps[currentStep]}`,
          input: "text",
          inputValue: values[currentStep],
          showCancelButton: currentStep > 0,
          currentProgressStep: currentStep,
        });

        if (result.value) {
          values[currentStep] = result.value;
          currentStep++;
        } else if (result.dismiss === Swal.DismissReason.cancel) {
          currentStep--;
        } else {
          break;
        }
      }

      if (currentStep === steps.length) {
        this.$swal({
          title: '<h5 class="mb-10">All done!</h5>',
          html:
            "Your answers: <pre><code>" +
            JSON.stringify(values) +
            '</code></pre><button class="btn btn-primary bg-twitter btn-wth-icon icon-wthot-bg me-15 mt-25"><span class="icon-label"><i class="fa fa-twitter"></i> </span><span class="btn-text">twitter</span></button><button class="btn btn-primary bg-facebook btn-wth-icon icon-wthot-bg mt-25"><span class="icon-label"><i class="fa fa-facebook"></i> </span><span class="btn-text">facebook</span></button>',
          buttonsStyling: false,
          customClass: {
            content: "pa-0",
            confirmButton: "btn btn-primary d-none",
          },
        });
      }
    },
  }
}
</script>