New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

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.

<button id="sweetalert_1" class="btn btn-primary">Try Me</button>

<!-- Sweetalert JS -->
<script src="vendors/sweetalert2/dist/sweetalert2.min.js"></script>
$(document).on("click",'#sweetalert_1',function (e) {
	Swal.fire({
		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>',
		width: 400,
		showConfirmButton:false,
		buttonsStyling: false
	})
});

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

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

<button id="sweetalert_1" class="btn btn-primary">Try Me</button>

Sweet alert type 2

A title with a text under.

<button id="sweetalert_2" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_2',function (e) {
	Swal.fire({
		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,
	})
});

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

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

<button id="sweetalert_2" class="btn btn-primary">Try Me</button>

Sweet alert type 3

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

<button id="sweetalert_3" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_3',function (e) {
	Swal.fire({
		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>'
	})
});

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

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

<button id="sweetalert_3" class="btn btn-primary">Try Me</button>

Sweet alert type 4

Custom HTML description and buttons with ARIA labels.

<button id="sweetalert_4" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_5',function (e) {
	Swal.fire({
		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) {
		Swal.fire({
			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,
		})
	  }
	})
});

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

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

<button id="sweetalert_4" class="btn btn-primary">Try Me</button>

Sweet alert type 5

A custom positioned dialog.

<button id="sweetalert_5" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_6',function (e) {
	Swal.fire({
		position: 'top-end',
		timer: 15000,
		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>'
	})
});

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

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

<button id="sweetalert_5" class="btn btn-primary">Try Me</button>

Sweet alert type 6

Custom animation with Animate.css .

<button id="sweetalert_6" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_6',function (e) {
	Swal.fire({
		position: 'top-end',
		timer: 15000,
		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>'
	})
});

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

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

<button id="sweetalert_6" class="btn btn-primary">Try Me</button>

Sweet alert type 7

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

<button id="sweetalert_7" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_7',function (e) {
	Swal.fire({
		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) {
		Swal.fire({
			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,
		})
		}
	})
});

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

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

<button id="sweetalert_7" class="btn btn-primary">Try Me</button>

Sweet alert type 8

A message with a custom image.

<button id="sweetalert_8" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_8',function (e) {
	Swal.fire({
		title: 'Sweet!',
		text: 'Modal with a custom image.',
		imageUrl: 'dist/img/avatar1.jpg',
		imageWidth: 'auto',
		imageHeight: 150,
		imageAlt: 'Custom image',
		customClass: {
			confirmButton: 'btn btn-primary',
		},
		buttonsStyling: false,
	})
});

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

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

<button id="sweetalert_8" class="btn btn-primary">Try Me</button>

Sweet alert type 9

A message with auto close timer.

<button id="sweetalert_9" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_9',function (e) {
	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')
		}
	})
});

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

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

<button id="sweetalert_9" class="btn btn-primary">Try Me</button>

Sweet alert type 10

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

<button id="sweetalert_10" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_10',function (e) {
	Swal.fire({
		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,
	})
});

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

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

<button id="sweetalert_10" class="btn btn-primary">Try Me</button>

Sweet alert type 11

AJAX request example.

<button id="sweetalert_11" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_11',function (e) {
	Swal.fire({
		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) {
		Swal.fire({
		  title: `${result.value.login}'s avatar`,
		  imageUrl: result.value.avatar_url
		})
		}
	})
});

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

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

<button id="sweetalert_11" class="btn btn-primary">Try Me</button>

Sweet alert type 12

Chaining modals (queue) example.

<button id="sweetalert_11" class="btn btn-primary">Try Me</button>

$(document).on("click",'#sweetalert_11',function (e) {
	Swal.fire({
		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) {
		Swal.fire({
		  title: `${result.value.login}'s avatar`,
		  imageUrl: result.value.avatar_url
		})
		}
	})
});

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

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

<button id="sweetalert_11" class="btn btn-primary">Try Me</button>

Sweet alert type 1
Sweet alert type 2
Sweet alert type 3
Sweet alert type 4
Sweet alert type 5
Sweet alert type 6
Sweet alert type 7
Sweet alert type 8
Sweet alert type 9
Sweet alert type 10
Sweet alert type 11
Sweet alert type 12