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

Toast Alerts

Here we are using React-Toastify plugin for toast alerts. View full documentation here.

Basic example

All the toast methods return a toastId except dismiss and isActive. The toastId can be used to avoid duplicate toast alerts and remove a toast programmatically or to check if the toast is displayed. You can see all the toast props here

<button class="tst1 btn btn-info">Info Message</button>
<button class="tst2 btn btn-warning">Warning Message</button>
<button class="tst3 btn btn-success">Success Message</button>
<button class="tst4 btn btn-danger">Error Message</button>

<!-- Toastr JS -->
<script src="vendors/jquery-toast-plugin/dist/jquery.toast.min.js"></script>
$('.tst1').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class');
	$.toast({
		text: '<i class="jq-toast-icon ti-twitter-alt"></i><p>John! Recently joined twitter.</p>',
		position: 'top-left',
		loaderBg:'#00acf0',
		class: 'jq-has-icon jq-toast-info',
		hideAfter: 3500,
		loader:false,
		stack: 6,
		showHideTransition: 'fade'
	});
	return false;
});
$('.tst2').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class');
	$.toast({
		heading: 'Are you sure you want to delete this file?',
		text: '<i class="jq-toast-icon ti-alert"></i><button class="btn btn-secondary btn-sm mt-3 me-2">yes</button><button class="btn btn-primary btn-sm mt-3">cancel</button>',
		position: 'top-right',
		loaderBg:'#00acf0',
		class: 'jq-has-icon jq-toast-warning',
		hideAfter: 3500,
		loader:false,
		stack: 6,
		showHideTransition: 'fade'
	});
	return false;
});
$('.tst3').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class');
	$.toast({
		text: '<i class="jq-toast-icon ti-location-pin"></i><p>John Doe started following your board.</p>',
		position: 'bottom-left',
		loaderBg:'#00acf0',
		class: 'jq-has-icon jq-toast-success',
		hideAfter: 3500,
		loader:false,
		stack: 6,
		showHideTransition: 'fade'
	  });
	return false;
});
$('.tst4').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class');
	$.toast({
		heading: 'Oh snap!',
		text: '<p>Change a few things and try submitting again.</p>',
		position: 'bottom-right',
		loaderBg:'#00acf0',
		class: 'jq-toast-danger',
		hideAfter: 3500,
		stack: 6,
		loader:false,
		showHideTransition: 'fade'
	});
	return false;
});

<template>
    <div>
        <BButton variant="primary" @click="defaultToast">Default Message</BButton>
        <BButton variant="info" @click="infoToast">Info Message</BButton>
        <BButton variant="warning" @click="warningToast">Warning Message</BButton>
        <BButton variant="success" @click="successToast">Success Message</BButton>
        <BButton variant="danger" @click="errorToast">Error Message</BButton>
    </div>
</template>
<script lang="jsx" setup>
//Default Toast
const defaultToast = () => {
  useNuxtApp().$toast("🦄 This is a default toast message", { hideProgressBar: true });
};
//Info Toast
const infoToast = () => {
  useNuxtApp().$toast.info("John! Recently joined twitter.", {
    toastId: "toast1",
    // you can see all details about custom icon here: https://vue3-toastify.js-bridge.com/usage/icons.html
    icon: () => <ComponentIcon class="ti-twitter-alt" />,
    hideProgressBar: true,
    position: "top-left",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Warning Toast
const warningToast = () => {
  useNuxtApp().$toast.warning("This is a warning toast", {
    toastId: "toast2",
    hideProgressBar: true,
    position: "top-right",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Success Toast
const successToast = () => {
  useNuxtApp().$toast.success("Test Complete Successfully", {
    toastId: "toast3",
    hideProgressBar: true,
    position: "bottom-left",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Error Toast
const errorToast = () => {
  useNuxtApp().$toast.error("Please try again later!", {
    toastId: "toast4",
    hideProgressBar: true,
    position: "bottom-right",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
</script>

<template>
    <div>
        <BButton variant="primary" @click="defaultToast">Default Message</BButton>
        <BButton variant="info" @click="infoToast">Info Message</BButton>
        <BButton variant="warning" @click="warningToast">Warning Message</BButton>
        <BButton variant="success" @click="successToast">Success Message</BButton>
        <BButton variant="danger" @click="errorToast">Error Message</BButton>
    </div>
</template>
<script lang="jsx" setup>
//Default Toast
const defaultToast = () => {
  useNuxtApp().$toast("🦄 This is a default toast message", { hideProgressBar: true });
};
//Info Toast
const infoToast = () => {
  useNuxtApp().$toast.info("John! Recently joined twitter.", {
    toastId: "toast1",
    // you can see all details about custom icon here: https://vue3-toastify.js-bridge.com/usage/icons.html
    icon: () => <ComponentIcon class="ti-twitter-alt" />,
    hideProgressBar: true,
    position: "top-left",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Warning Toast
const warningToast = () => {
  useNuxtApp().$toast.warning("This is a warning toast", {
    toastId: "toast2",
    hideProgressBar: true,
    position: "top-right",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Success Toast
const successToast = () => {
  useNuxtApp().$toast.success("Test Complete Successfully", {
    toastId: "toast3",
    hideProgressBar: true,
    position: "bottom-left",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Error Toast
const errorToast = () => {
  useNuxtApp().$toast.error("Please try again later!", {
    toastId: "toast4",
    hideProgressBar: true,
    position: "bottom-right",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
</script>

<button class="tst1 btn btn-info">Info Message</button>
<button class="tst2 btn btn-warning">Warning Message</button>
<button class="tst3 btn btn-success">Success Message</button>
<button class="tst4 btn btn-danger">Error Message</button>

Inverse Toast Alerts

Use theme:"colored" option for colored or inverse toast alert

<button id="primary_notification_inverse" class="btn btn-primary">Primary Message</button>
<button id="warning_notification_inverse" class="btn btn-warning">Warning Message</button>
<button id="danger_notification_inverse" class="btn btn-danger">Danger Message</button>
<button id="info_notification_inverse" class="btn btn-info">Info Message</button>
<button id="success_notification_inverse" class="btn btn-success">Success Message</button>

$('#primary_notification_inverse').on('click', function(event) {
	event.preventDefault();
	$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
		animate: {
			enter: 'animated bounceInDown',
			exit: 'animated bounceOutUp'
		},
		type: "inv alert-inv-primary",
		allow_dismiss:false,
		delay:50000000
	});
});
$('#warning_notification_inverse').on('click', function(event) {
	event.preventDefault();
	$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
		animate: {
			enter: 'animated bounceInDown',
			exit: 'animated bounceOutUp'
		},
		type: "inv alert-inv-warning",
		allow_dismiss:false
	});
});
$('#info_notification_inverse').on('click', function(event) {
	event.preventDefault();
	$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
		animate: {
			enter: 'animated bounceInDown',
			exit: 'animated bounceOutUp'
		},
		type: "inv alert-inv-info",
		allow_dismiss:false
	});
});
$('#success_notification_inverse').on('click', function(event) {
	event.preventDefault();
	$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
		animate: {
			enter: 'animated bounceInDown',
			exit: 'animated bounceOutUp'
		},
		type: "inv alert-inv-success",
		allow_dismiss:false
	});
});
$('#danger_notification_inverse').on('click', function(event) {
	event.preventDefault();
	$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
		animate: {
			enter: 'animated bounceInDown',
			exit: 'animated bounceOutUp'
		},
		type: "inv alert-inv-danger",
		allow_dismiss:false
	});
});

<template>
    <div>
        <BButton variant="primary" @click="defaultToast">Default Message</BButton>
        <BButton variant="info" @click="infoToast">Info Message</BButton>
        <BButton variant="warning" @click="warningToast">Warning Message</BButton>
        <BButton variant="success" @click="successToast">Success Message</BButton>
        <BButton variant="danger" @click="errorToast">Error Message</BButton>
    </div>
</template>
<script lang="jsx" setup>
//Default Toast
const defaultToast = () => {
  useNuxtApp().$toast("🦄 This is a default toast message", {
    hideProgressBar: true,
    theme: "colored",
  });
};
//Info Toast
const infoToast = () => {
  useNuxtApp().$toast.info("John! Recently joined twitter.", {
   // you can see all details about custom icon here: https://vue3-toastify.js-bridge.com/usage/icons.html
    icon: () => <ComponentIcon class="ti-twitter-alt" />,
    hideProgressBar: true,
    position: "top-left",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Warning Toast
const warningToast = () => {
  useNuxtApp().$toast.warning("This is a warning toast", {
    hideProgressBar: true,
    position: "top-right",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Success Toast
const successToast = () => {
  useNuxtApp().$toast.success("Test Complete Successfully", {
    hideProgressBar: true,
    position: "bottom-left",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Error Toast
const errorToast = () => {
  useNuxtApp().$toast.error("Please try again later!", {
    hideProgressBar: true,
    position: "bottom-right",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
</script>

<template>
    <div>
        <BButton variant="primary" @click="defaultToast">Default Message</BButton>
        <BButton variant="info" @click="infoToast">Info Message</BButton>
        <BButton variant="warning" @click="warningToast">Warning Message</BButton>
        <BButton variant="success" @click="successToast">Success Message</BButton>
        <BButton variant="danger" @click="errorToast">Error Message</BButton>
    </div>
</template>
<script lang="jsx" setup>
//Default Toast
const defaultToast = () => {
  useNuxtApp().$toast("🦄 This is a default toast message", {
    hideProgressBar: true,
    theme: "colored",
  });
};
//Info Toast
const infoToast = () => {
  useNuxtApp().$toast.info("John! Recently joined twitter.", {
   // you can see all details about custom icon here: https://vue3-toastify.js-bridge.com/usage/icons.html
    icon: () => <ComponentIcon class="ti-twitter-alt" />,
    hideProgressBar: true,
    position: "top-left",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Warning Toast
const warningToast = () => {
  useNuxtApp().$toast.warning("This is a warning toast", {
    hideProgressBar: true,
    position: "top-right",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Success Toast
const successToast = () => {
  useNuxtApp().$toast.success("Test Complete Successfully", {
    hideProgressBar: true,
    position: "bottom-left",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
//Error Toast
const errorToast = () => {
  useNuxtApp().$toast.error("Please try again later!", {
    hideProgressBar: true,
    position: "bottom-right",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
</script>

<button id="primary_notification_inverse" class="btn btn-primary">Primary Message</button>
<button id="warning_notification_inverse" class="btn btn-warning">Warning Message</button>
<button id="danger_notification_inverse" class="btn btn-danger">Danger Message</button>
<button id="info_notification_inverse" class="btn btn-info">Info Message</button>
<button id="success_notification_inverse" class="btn btn-success">Success Message</button>

Toastr Alerts positions

You can set position option like (position: 'top-right') in toast function or <ToastContainer /> component.

<button class="tst5 btn btn-secondary">Top left</button>
<button class="tst6 btn btn-secondary">Top right</button>
<button class="tst7 btn btn-secondary">Bottom left</button>
<button class="tst8 btn btn-secondary">Bottom right</button>
<button class="tst9 btn btn-secondary">Top center full width</button>
<button class="tst10 btn btn-secondary">Bottom center full width</button>

$('.tst5').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class');
	$.toast({
		heading: 'Well done!',
		text: '<p>You have successfully completed level 1.</p><button class="btn btn-primary btn-sm mt-3">Play again</button>',
		position: 'top-left',
		loaderBg:'#00acf0',
		class: 'jq-toast-primary',
		loader:false,
		hideAfter: 3500,
		stack: 6,
		showHideTransition: 'fade'
	});
	return false;
});
$('.tst6').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class');
	$.toast({
		heading: 'Well done!',
		text: '<p>You have successfully completed level 1.</p><button class="btn btn-primary btn-sm mt-3">Play again</button>',
		position: 'top-right',
		loaderBg:'#00acf0',
		class: 'jq-toast-primary',
		hideAfter: 3500,
		loader:false,
		stack: 6,
		showHideTransition: 'fade'
	});
	return false;
});
$('.tst7').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class');
	$.toast({
		heading: 'Well done!',
		text: '<p>You have successfully completed level 1.</p><button class="btn btn-primary btn-sm mt-3">Play again</button>',
		position: 'bottom-left',
		loaderBg:'#00acf0',
		class: 'jq-toast-primary',
		hideAfter: 3500,
		loader:false,
		stack: 6,
		showHideTransition: 'fade'
	});
	return false;
});
$('.tst8').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class');
	$.toast({
		heading: 'Well done!',
		text: '<p>You have successfully completed level 1.</p><button class="btn btn-primary btn-sm mt-3">Play again</button>',
		position: 'bottom-right',
		loaderBg:'#00acf0',
		class: 'jq-toast-primary',
		hideAfter: 3500,
		loader:false,
		stack: 6,
		showHideTransition: 'fade'
	});
	return false;
});
$('.tst9').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class').removeClass("bottom-center-fullwidth").addClass("top-center-fullwidth");
	$.toast({
		text: '<div class="d-flex align-items-center justify-content-center"><p>Your Website uses cookies to ensure you to get the best experience on our website. <a href="#">Cookies Policy</a></p><button class="btn btn-sm btn-primary ms-3">Got It</button></div>',
		position: 'bottom-center',
		class: 'jq-toast-dark',
		hideAfter: false,
		textAlign: 'center',
		stack: 6,
		loader:false,
		showHideTransition: 'fade'
	});
	return false;
});
$('.tst10').on('click',function(e){
	$.toast().reset('all');
	$("body").removeAttr('class').addClass("bottom-center-fullwidth");
	$.toast({
		text: '<p>Your plugin has an update available. <a href="#">Open Plugin Manager</u></p>',
		position: 'bottom-center',
		class: 'jq-toast-inv bg-theme',
		hideAfter: false,
		textAlign: 'center',
		stack: 6,
		loader:false,
		showHideTransition: 'fade'
	});
	return false;
});

<template>
    <BButton variant="secondary" @click="toastPositions('top-left')" >Top left</BButton>
    <BButton variant="secondary" @click="toastPositions('top-right')" >Top right</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-left')" >Bottom left</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-right')" >Bottom right</BButton>
    <BButton variant="secondary" @click="toastPositions('top-center')" >Top center</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-center')" >Bottom center</BButton>
</template>
<script lang="jsx" setup>
const toastPositions = (position) => {
  const variants = ["info", "success", "warning", "error", "default"];
  const rndmitem = Math.floor(Math.random() * variants.length);
  const types = variants[rndmitem];
  useNuxtApp().$toast(`This is a toast message on ${position}`, {
    type: types,
    icon: () => <ComponentIcon class="fa fa-gear fa-spin" style={{ fontSize: '24px' }} />,
    position: position,
    hideProgressBar: true,
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
    pauseOnHover: false,
  });
};
</script>

<template>
    <BButton variant="secondary" @click="toastPositions('top-left')" >Top left</BButton>
    <BButton variant="secondary" @click="toastPositions('top-right')" >Top right</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-left')" >Bottom left</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-right')" >Bottom right</BButton>
    <BButton variant="secondary" @click="toastPositions('top-center')" >Top center</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-center')" >Bottom center</BButton>
</template>
<script lang="jsx" setup>
const toastPositions = (position) => {
  const variants = ["info", "success", "warning", "error", "default"];
  const rndmitem = Math.floor(Math.random() * variants.length);
  const types = variants[rndmitem];
  useNuxtApp().$toast(`This is a toast message on ${position}`, {
    type: types,
    icon: () => <ComponentIcon class="fa fa-gear fa-spin" style={{ fontSize: '24px' }} />,
    position: position,
    hideProgressBar: true,
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
    pauseOnHover: false,
  });
};
</script>

<template>
    <BButton variant="secondary" @click="toastPositions('top-left')" >Top left</BButton>
    <BButton variant="secondary" @click="toastPositions('top-right')" >Top right</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-left')" >Bottom left</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-right')" >Bottom right</BButton>
    <BButton variant="secondary" @click="toastPositions('top-center')" >Top center</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-center')" >Bottom center</BButton>
</template>
<script lang="jsx" setup>
const toastPositions = (position) => {
  const variants = ["info", "success", "warning", "error", "default"];
  const rndmitem = Math.floor(Math.random() * variants.length);
  const types = variants[rndmitem];
  useNuxtApp().$toast(`This is a toast message on ${position}`, {
    type: types,
    icon: () => <ComponentIcon class="fa fa-gear fa-spin" style={{ fontSize: '24px' }} />,
    position: position,
    hideProgressBar: true,
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
    pauseOnHover: false,
  });
};
</script>

Basic example
Tostr inverse
Toastr Alerts positions