\n\n\n\n`\n","\n \n \n SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below!\n \n\n \n
\n \n Basic\n \n \n With Title\n \n \n With Footer\n \n \n HTML\n \n
\n\n \n {{ codeBasic }}\n \n \n\n\n\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SweetAlertBasic.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SweetAlertBasic.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SweetAlertBasic.vue?vue&type=template&id=7f2ae4dd&\"\nimport script from \"./SweetAlertBasic.vue?vue&type=script&lang=js&\"\nexport * from \"./SweetAlertBasic.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Position\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codePosition)+\" \")]},proxy:true}])},[_c('b-card-text',{staticClass:\"mb-0\"},[_vm._v(\" You can specify position of your alert with \"),_c('code',[_vm._v(\"{position : 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' }\")]),_vm._v(\" in js. \")]),_c('div',{staticClass:\"demo-inline-spacing\"},[_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.topStart}},[_vm._v(\" Top Start \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.topEnd}},[_vm._v(\" Top End \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.bottomStart}},[_vm._v(\" Bottom Starts \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.bottomEnd}},[_vm._v(\" Bottom End \")])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n \n \n You can specify position of your alert with {position : 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' } in js.\n \n\n \n
\n \n Top Start\n \n \n Top End\n \n \n Bottom Starts\n \n \n Bottom End\n \n
\n\n \n {{ codePosition }}\n \n \n\n\n\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SweetAlertPosition.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SweetAlertPosition.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SweetAlertPosition.vue?vue&type=template&id=89c38cc0&\"\nimport script from \"./SweetAlertPosition.vue?vue&type=script&lang=js&\"\nexport * from \"./SweetAlertPosition.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Animations\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeAnimation)+\" \")]},proxy:true}])},[_c('b-card-text',{staticClass:\"mb-0\"},[_c('span',[_vm._v(\"Use \")]),_c('code',[_vm._v(\"popup\")]),_c('span',[_vm._v(\" inside \")]),_c('code',[_vm._v(\"showClass\")]),_c('span',[_vm._v(\" parameter to add animation to your alert.\")])]),_c('div',{staticClass:\"demo-inline-spacing\"},[_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.bounceIn}},[_vm._v(\" Bounce In \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.fadeIn}},[_vm._v(\" Fade In \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.flipIn}},[_vm._v(\" Flip In \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.tada}},[_vm._v(\" Tada \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"click\":_vm.shake}},[_vm._v(\" Shake \")])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n \n \n Use \n popup\n inside \n showClass\n parameter to add animation to your alert.\n \n\n \n
\n\n \n {{ codeAnimation }}\n \n \n\n\n\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SweetAlertAnimation.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SweetAlertAnimation.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SweetAlertAnimation.vue?vue&type=template&id=6dfa965d&\"\nimport script from \"./SweetAlertAnimation.vue?vue&type=script&lang=js&\"\nexport * from \"./SweetAlertAnimation.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Types\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeTypes)+\" \")]},proxy:true}])},[_c('b-card-text',[_vm._v(\" The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: \\\"success\\\", \\\"error\\\", \\\"warning\\\" and \\\"info\\\". You can also set it as \\\"input\\\" to get a prompt modal. It can either be put in the object under the key \\\"icon\\\" or passed as the third parameter of the function. \")]),_c('div',{staticClass:\"demo-inline-spacing\"},[_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(40, 199, 111, 0.15)'),expression:\"'rgba(40, 199, 111, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-success\"},on:{\"click\":_vm.success}},[_vm._v(\" Success \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(234, 84, 85, 0.15)'),expression:\"'rgba(234, 84, 85, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-danger\"},on:{\"click\":_vm.error}},[_vm._v(\" Error \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(255, 159, 67, 0.15)'),expression:\"'rgba(255, 159, 67, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-warning\"},on:{\"click\":_vm.warning}},[_vm._v(\" Warning \")]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(0, 207, 232, 0.15)'),expression:\"'rgba(0, 207, 232, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-info\"},on:{\"click\":_vm.info}},[_vm._v(\" Info \")])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n \n \n The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: \"success\", \"error\", \"warning\" and \"info\". You can also set it as \"input\" to get a prompt modal. It can either be put in the object under the key \"icon\" or passed as the third parameter of the function.\n \n\n \n