Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

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
	})
});

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,
	})
});

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>'
		
	})
});

Sweet alert type 4

Custom HTML description and buttons with ARIA labels.

														
<button id="sweetalert_5" 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,
		})
	  }
	})
});

Sweet alert type 5

A custom positioned dialog.

														
<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>'
	})
});

Sweet alert type 6

Custom animation with Animate.css .

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

														
$(document).on("click",'#sweetalert_7',function (e) {
	Swal.fire({
		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'
		},
		showClass: {
		popup: 'animated fadeInDown faster'
		},
		hideClass: {
		popup: 'animated fadeOutUp faster'
		},
		showCancelButton: true,
		buttonsStyling: false,
		showCloseButton:true,
		confirmButtonText: 'TRY AGAIN',
		cancelButtonText: 'CLOSE',
		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">Your file has been deleted!</h5></div>',
			customClass: {
				content: 'p-0 text-start',
				confirmButton: 'btn btn-primary',
				actions: 'justify-content-start',
			},
			buttonsStyling: false,
		})
		}
	})
});

Sweet alert type 7

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

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

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

Sweet alert type 8

A message with a custom image.

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

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

Sweet alert type 9

A message with auto close timer.

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

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

Sweet alert type 10

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

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

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

Sweet alert type 11

AJAX request example.

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

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

Sweet Alert