[ Mini Kiebo ]
Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64
Path:
D:
/
xampp
/
htdocs
/
bem
/
assets
/
sweetalert
/
docs
/
guides
/
[
Home
]
File: index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>SweetAlert</title> <meta name="description" content="A beautiful replacement for JavaScript's 'alert'"> <link rel="stylesheet" href="/assets/css/app.css"> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <script src="/assets/sweetalert/sweetalert.min.js"></script> </head> <body> <header class="global-header"> <div class="page-container"> <a href="/" class="logo"> </a> <nav> <ul> <li> <a href="/guides">Guides</a> </li> <li> <a href="/docs">Docs</a> </li> <li> <a href="https://www.paypal.me/edwards" target="_blank">Donate</a> </li> <li> <a href="https://github.com/t4t5/sweetalert" class="github-icon"></a> </li> </ul> </nav> </div> </header> <!-- layout: default --> <div class="page-container doc-container"> <nav class="side-menu"> <h6 class="title"> Guides </h6> <a href="#installation"> Installation </a> <a href="#getting-started"> Getting started </a> <a href="#advanced-examples"> Advanced examples </a> <a href="#upgrading-from-1x"> Upgrading from 1.X </a> </nav> <div class="page-content"> <!-- layout: guides --> <h1 id="installation" class="deep-link"><a href="#installation">Installation</a></h1> <h2 id="npmyarn" class="deep-link"><a href="#npmyarn">NPM/Yarn</a></h2> <p>NPM combined with a tool like <a href="http://browserify.org">Browserify</a> or <a href="https://webpack.js.org">Webpack</a> is the recommended method of installing SweetAlert.</p> <div class="highlight bash"><pre class="editor editor-colors"><div class="line"><span class="text plain null-grammar"><span>npm install sweetalert --save</span></span></div></pre></div> <p>Then, simply import it into your application:</p> <div class="highlight javascript"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta import js"><span class="keyword control js"><span>import</span></span><span> </span><span class="variable other module js"><span>swal</span></span><span> </span><span class="keyword control js"><span>from</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>sweetalert</span><span class="punctuation definition string end js"><span>'</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <h2 id="cdn" class="deep-link"><a href="#cdn">CDN</a></h2> <p>You can also find SweetAlert on <a href="https://unpkg.com/sweetalert">unpkg</a> and <a href="https://cdn.jsdelivr.net/npm/sweetalert">jsDelivr</a> and use the global <code>swal</code> variable.</p> <div class="highlight html"><pre class="editor editor-colors"><div class="line"><span class="text html basic"><span class="meta tag any html"><span class="punctuation definition tag html"><span><</span></span><span class="entity name tag html"><span>script</span></span><span> </span><span class="entity other attribute-name html"><span>src</span></span><span>=</span><span class="string quoted double html"><span class="punctuation definition string begin html"><span>"</span></span><span class="markup underline link https hyperlink"><span>https://unpkg.com/sweetalert/dist/sweetalert.min.js</span></span><span class="punctuation definition string end html"><span>"</span></span></span><span class="punctuation definition tag html"><span>></span><span class="meta scope between-tag-pair html"><span><</span></span><span>/</span></span><span class="entity name tag html"><span>script</span></span><span class="punctuation definition tag html"><span>></span></span></span></span></div></pre></div> <h1 id="getting-started" class="deep-link"><a href="#getting-started">Getting started</a></h1> <h2 id="showing-an-alert" class="deep-link"><a href="#showing-an-alert">Showing an alert</a></h2> <p>After importing the files into your application, you can call the <code>swal</code> function (make sure it's called <em>after</em> the DOM has loaded!)</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Hello world!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <p>If you pass two arguments, the first one will be the modal's title, and the second one its text.</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Here's the title!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>...and here's the text!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <p>And with a third argument, you can add an icon to your alert! There are 4 predefined ones: <code>"warning"</code>, <code>"error"</code>, <code>"success"</code> and <code>"info"</code>.</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Good job!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>You clicked the button!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>success</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <h2 id="using-options" class="deep-link"><a href="#using-options">Using options</a></h2> <p>The last example can also be rewritten using an object as the only parameter:</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  title</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Good job!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  text</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>You clicked the button!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  icon</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>success</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p>With this format, we can specify many more options to customize our alert. For example we can change the text on the confirm button to <code>"Aww yiss!"</code>:</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  title</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Good job!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  text</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>You clicked the button!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  icon</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>success</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  button</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Aww yiss!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <p>You can even combine the first syntax with the second one, which might save you some typing:</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Good job!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>You clicked the button!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>success</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  button</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Aww yiss!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p>For a full list of all the available options, check out the <a href="/docs">API docs</a>!</p> <h2 id="using-promises" class="deep-link"><a href="#using-promises">Using promises</a></h2> <p>SweetAlert uses <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> to keep track of how the user interacts with the alert.</p> <p>If the user clicks the confirm button, the promise resolves to <code>true</code>. If the alert is dismissed (by clicking outside of it), the promise resolves to <code>null</code>.</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Click on either the button or outside the modal.</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>value</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted template js"><span class="punctuation definition string begin js"><span>`</span></span><span>The returned value is: </span><span class="source js embedded source"><span class="punctuation section embedded js"><span>${</span></span><span>value</span><span class="punctuation section embedded js"><span>}</span></span></span><span class="punctuation definition string end js"><span>`</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <p>This comes in handy if you want to warn the user before they perform a dangerous action. We can make our alert even better by setting some more options:</p> <ul> <li><code>icon</code> can be set to the predefined <code>"warning"</code> to show a nice warning icon.</li> <li>By setting <code>buttons</code> (plural) to <code>true</code>, SweetAlert will show a cancel button in addition to the default confirm button.</li> <li>By setting <code>dangerMode</code> to <code>true</code>, the focus will automatically be set on the cancel button instead of the confirm button, and the confirm button will be red instead of blue to emphasize the dangerous action.</li> </ul> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  title</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Are you sure?</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  text</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Once deleted, you will not be able to recover this imaginary file!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  icon</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>warning</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  buttons</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  dangerMode</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>willDelete</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="keyword control js"><span>if</span></span><span> </span><span class="meta brace round js"><span>(</span></span><span>willDelete</span><span class="meta brace round js"><span>)</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Poof! Your imaginary file has been deleted!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>      icon</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>success</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>    </span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span><span> </span><span class="keyword control js"><span>else</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Your imaginary file is safe!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <h1 id="advanced-examples" class="deep-link"><a href="#advanced-examples">Advanced examples</a></h1> <h2 id="customizing-buttons" class="deep-link"><a href="#customizing-buttons">Customizing buttons</a></h2> <p>We've already seen how we can set the text on the confirm button using <code>button: "Aww yiss!"</code>.</p> <p>If we also want to show and customize the <em>cancel button</em>, we can instead set <code>buttons</code> to an <em>array of strings</em>, where the first value is the cancel button's text and the second one is the confirm button's text:</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Are you sure you want to do this?</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  buttons</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="meta brace square js"><span>[</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Oh noez!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Aww yiss!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta brace square js"><span>]</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <p>If you want one of the buttons to just have their default text, you can set the value to <code>true</code> instead of a string:</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Are you sure you want to do this?</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  buttons</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="meta brace square js"><span>[</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Oh noez!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="constant language boolean true js"><span>true</span></span><span class="meta brace square js"><span>]</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <p>So what if you need <em>more</em> than just a cancel and a confirm button? Don't worry, SweetAlert's got you covered!</p> <p>By specifying an object for <code>buttons</code>, you can set exactly as many buttons as you like, and specify the value that they resolve to when they're clicked!</p> <p>In the example below, we set 3 buttons:</p> <ul> <li><code>cancel</code>, which by default resolves to <code>null</code> and has a custom <code>"Run away!"</code> text.</li> <li><code>catch</code>, which will resolve to the <code>value</code> we've specified (<code>"catch"</code>) and has the custom text <code>"Throw Pokéball!"</code>.</li> <li><code>defeat</code>. Here, we specify <code>true</code> to let SweetAlert set some default configurations for the button. In this case, it will set the <code>text</code> to <code>"Defeat"</code> (capitalized) and the resolved value to <code>defeat</code>. Had we set the <code>cancel</code> button to <code>true</code>, it would still resolve to <code>null</code> as expected.</li> </ul> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>A wild Pikachu appeared! What do you want to do?</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  buttons</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>    cancel</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Run away!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>    catch</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>      text</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Throw Pokéball!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>      value</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>catch</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>    </span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>    defeat</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>value</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="keyword control js"><span>switch</span></span><span> </span><span class="meta brace round js"><span>(</span></span><span>value</span><span class="meta brace round js"><span>)</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="keyword control js"><span>case</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>defeat</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="keyword operator js"><span>:</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>      </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Pikachu fainted! You gained 500 XP!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>      </span><span class="keyword control js"><span>break</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="keyword control js"><span>case</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>catch</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="keyword operator js"><span>:</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>      </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Gotcha!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Pikachu was caught!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>success</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>      </span><span class="keyword control js"><span>break</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="keyword control js"><span>default</span></span><span class="keyword operator js"><span>:</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>      </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Got away safely!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <p>You can check out all the available button options in the <a href="/docs#buttons">docs</a>.</p> <h2 id="ajax-requests" class="deep-link"><a href="#ajax-requests">AJAX requests</a></h2> <p>Since SweetAlert is promise-based, it makes sense to pair it with AJAX functions that are also promise-based. Below is an example of using <code>fetch</code> to search for artists on the iTunes API. Note that we're using <code>content: "input"</code> in order to both show an input-field <em>and</em> retrieve its value when the user clicks the confirm button:</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  text</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>Search for a movie. e.g. "La La Land".</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  content</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>input</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  button</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>    text</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Search!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>    closeModal</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant language boolean false js"><span>false</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="variable parameter function js"><span>name</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="keyword control js"><span>if</span></span><span> </span><span class="meta brace round js"><span>(</span></span><span class="keyword operator logical js"><span>!</span></span><span>name</span><span class="meta brace round js"><span>)</span></span><span> </span><span class="keyword control js"><span>throw</span></span><span> </span><span class="constant language null js"><span>null</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="keyword control js"><span>return</span></span><span> </span><span class="meta function-call js"><span class="entity name function js"><span>fetch</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted template js"><span class="punctuation definition string begin js"><span>`</span></span><span class="markup underline link https hyperlink"><span>https://itunes.apple.com/search?term=</span></span><span class="source js embedded source"><span class="punctuation section embedded js"><span>${</span></span><span>name</span><span class="punctuation section embedded js"><span>}</span></span></span><span>&entity=movie</span><span class="punctuation definition string end js"><span>`</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="variable parameter function js"><span>results</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="keyword control js"><span>return</span></span><span> </span><span class="variable other object js"><span>results</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>json</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="variable parameter function js"><span>json</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="storage modifier js"><span>const</span></span><span> </span><span class="constant other js"><span>movie</span></span><span> </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="variable other object js"><span>json</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other property js"><span>results</span></span><span class="meta brace square js"><span>[</span></span><span class="constant numeric decimal js"><span>0</span></span><span class="meta brace square js"><span>]</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="keyword control js"><span>if</span></span><span> </span><span class="meta brace round js"><span>(</span></span><span class="keyword operator logical js"><span>!</span></span><span>movie</span><span class="meta brace round js"><span>)</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="keyword control js"><span>return</span></span><span> </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>No movie was found!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="storage modifier js"><span>const</span></span><span> </span><span class="constant other js"><span>name</span></span><span> </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="variable other object js"><span>movie</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other property js"><span>trackName</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="storage modifier js"><span>const</span></span><span> </span><span class="constant other js"><span>imageURL</span></span><span> </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="variable other object js"><span>movie</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other property js"><span>artworkUrl100</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>    title</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Top result:</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>    text</span><span class="keyword operator js"><span>:</span></span><span> name</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>    icon</span><span class="keyword operator js"><span>:</span></span><span> imageURL</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>catch</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="variable parameter function js"><span>err</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="keyword control js"><span>if</span></span><span> </span><span class="meta brace round js"><span>(</span></span><span>err</span><span class="meta brace round js"><span>)</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Oh noes!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>The AJAX request failed!</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>error</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span><span> </span><span class="keyword control js"><span>else</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="variable other object js"><span>swal</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>stopLoading</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="variable other object js"><span>swal</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function dom js"><span>close</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <h2 id="using-dom-nodes-as-content" class="deep-link"><a href="#using-dom-nodes-as-content">Using DOM nodes as content</a></h2> <p>Sometimes, you might run into a scenario where it would be nice to use the out-of-the box functionality that SweetAlert offers, but with some custom UI that goes beyond just styling buttons and text. For that, there's the <code>content</code> option.</p> <p>In the previous example, we saw how we could set <code>content</code> to <code>"input"</code> to get an <code><input /></code> element in our modal that changes the resolved value of the confirm button based on its value. <code>"input"</code> is a predefined option that exists for convenience, but you can also set <code>content</code> to any DOM node!</p> <p>Let's see how we can recreate the functionality of the following modal...</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Write something here:</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  content</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>input</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>value</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted template js"><span class="punctuation definition string begin js"><span>`</span></span><span>You typed: </span><span class="source js embedded source"><span class="punctuation section embedded js"><span>${</span></span><span>value</span><span class="punctuation section embedded js"><span>}</span></span></span><span class="punctuation definition string end js"><span>`</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button></preview-button></p> <p>...using a custom DOM node!</p> <p>We're going to use <a href="https://facebook.github.io/react">React</a> here, since it's a well-known UI library that can help us understand how to create more complex SweetAlert interfaces, but you can use any library you want, as long as you can extract a DOM node from it!</p> <div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta import js"><span class="keyword control js"><span>import</span></span><span> </span><span class="variable other module js"><span>React</span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="punctuation definition modules begin js"><span>{</span></span><span> </span><span class="variable other module js"><span>Component</span></span><span> </span><span class="punctuation definition modules end js"><span>}</span></span><span> </span><span class="keyword control js"><span>from</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>react</span><span class="punctuation definition string end js"><span>'</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="meta import js"><span class="keyword control js"><span>import</span></span><span> </span><span class="variable other module js"><span>ReactDOM</span></span><span> </span><span class="keyword control js"><span>from</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>react-dom</span><span class="punctuation definition string end js"><span>'</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="storage modifier js"><span>const</span></span><span> </span><span class="constant other js"><span>DEFAULT_INPUT_TEXT</span></span><span> </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="meta class js"><span class="storage type class js"><span>class</span></span><span> </span><span class="entity name type class js"><span>MyInput</span></span><span> </span><span class="storage modifier js"><span>extends</span></span><span> </span><span class="entity other inherited-class js"><span>Component</span></span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>  </span><span class="meta function js"><span class="entity name function constructor js"><span>constructor</span></span><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>props</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>    </span><span class="variable language js"><span>super</span></span><span class="meta brace round js"><span>(</span></span><span>props</span><span class="meta brace round js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span>    </span><span class="variable language js"><span>this</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other property js"><span>state</span></span><span> </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>      text</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant other js"><span>DEFAULT_INPUT_TEXT</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>    </span><span class="meta brace curly js"><span>}</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>  </span><span class="punctuation definition function body end bracket curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span>  </span><span class="meta function method definition js"><span class="entity name function js"><span>changeText</span></span><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>e</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>    </span><span class="storage type var js"><span>let</span></span><span> text </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="variable other object js"><span>e</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>target</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>value</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span>    </span><span class="variable language js"><span>this</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>setState</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>      text</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>    </span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span>    </span><span class="comment block js"><span class="punctuation definition comment js"><span>/*</span></span></span></span></div><div class="line"><span class="source js"><span class="comment block js"><span>     * This will update the value that the confirm</span></span></span></div><div class="line"><span class="source js"><span class="comment block js"><span>     * button resolves to:</span></span></span></div><div class="line"><span class="source js"><span class="comment block js"><span>     </span><span class="punctuation definition comment js"><span>*/</span></span></span></span></div><div class="line"><span class="source js"><span>    </span><span class="variable other object js"><span>swal</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>setActionValue</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span>text</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>  </span><span class="punctuation definition function body end bracket curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span>  </span><span class="meta function method definition js"><span class="entity name function js"><span>render</span></span><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>    </span><span class="keyword control js"><span>return</span></span><span> </span><span class="meta brace round js"><span>(</span></span></span></div><div class="line"><span class="source js"><span>      </span><span class="keyword operator comparison js"><span><</span></span><span>input</span></span></div><div class="line"><span class="source js"><span>        value</span><span class="keyword operator assignment js"><span>=</span></span><span class="meta brace curly js"><span>{</span></span><span class="variable language js"><span>this</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other object property js"><span>state</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>text</span></span><span class="meta brace curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span>        onChange</span><span class="keyword operator assignment js"><span>=</span></span><span class="meta brace curly js"><span>{</span></span><span class="variable language js"><span>this</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other object property js"><span>changeText</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>bind</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="variable language js"><span>this</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="meta brace curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span>      </span><span class="keyword operator js"><span>/</span></span><span class="keyword operator comparison js"><span>></span></span></span></div><div class="line"><span class="source js"><span>    </span><span class="meta brace round js"><span>)</span></span></span></div><div class="line"><span class="source js"><span>  </span><span class="punctuation definition function body end bracket curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span class="meta brace curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> We want to retrieve MyInput as a pure DOM node:</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>let</span></span><span> wrapper </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="support class js"><span>document</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function dom js"><span>createElement</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>div</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>ReactDOM</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>render</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="keyword operator comparison js"><span><</span></span><span>MyInput </span><span class="keyword operator js"><span>/</span></span><span class="keyword operator comparison js"><span>></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> wrapper</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>let</span></span><span> el </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="variable other object js"><span>wrapper</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>firstChild</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  text</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>Write something here:</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  content</span><span class="keyword operator js"><span>:</span></span><span> el</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  buttons</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>    confirm</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>      </span><span class="comment block js"><span class="punctuation definition comment js"><span>/*</span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="comment block js"><span>       * We need to initialize the value of the button to</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="comment block js"><span>       * an empty string instead of "true":</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="comment block js"><span>       </span><span class="punctuation definition comment js"><span>*/</span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>      value</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant other js"><span>DEFAULT_INPUT_TEXT</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>    </span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>  </span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>value</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span> </span><span class="storage type function arrow js"><span>=></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>  </span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted template js"><span class="punctuation definition string begin js"><span>`</span></span><span>You typed: </span><span class="source js embedded source"><span class="punctuation section embedded js"><span>${</span></span><span>value</span><span class="punctuation section embedded js"><span>}</span></span></span><span class="punctuation definition string end js"><span>`</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div> <p><preview-button data-function="reactExample"></preview-button></p> <p>This might look very complex at first, but it's actually pretty simple. All we're doing is creating an input tag as a React component. We then extract its DOM node and pass it into under the <code>swal</code> function's <code>content</code> option to render it as an unstyled element.</p> <p>The only code that's specific to SweetAlert is the <code>swal.setActionValue()</code> and the <code>swal()</code> call at the end. The rest is just basic React and JavaScript.</p> <figure align="center"> <img src="/assets/images/modal-fb-example@2x.png" alt="Facebook modal" width="400"> <figcaption> Using this technique, we can create modals with more interactive UIs, such as this one from Facebook. </figcaption> </figure> <h1 id="upgrading-from-1x" class="deep-link"><a href="#upgrading-from-1x">Upgrading from 1.X</a></h1> <p>SweetAlert 2.0 introduces some important breaking changes in order to make the library easier to use and more flexible.</p> <p>The most important change is that callback functions have been deprecated in favour of <a href="#using-promises">promises</a>, and that you no longer have to import any external CSS file (since the styles are now bundled in the .js-file).</p> <p>Below are some additional deprecated options along with their replacements:</p> <ul> <li>When using a single string parameter (e.g. <code>swal("Hello world!")</code>), that parameter will be the modal's <code>text</code> instead of its <code>title</code>.</li> <li><code>type</code> and <code>imageUrl</code> have been replaced with a single <code>icon</code> option. If you're using the shorthand version (<code>swal("Hi", "Hello world", "warning")</code>) you don't have to change anything.</li> <li><code>customClass</code> is now <code>className</code>.</li> <li><code>imageSize</code> is no longer used. Instead, you should specify dimension restrictions in CSS if necessary. If you have a special use case, you can give your modal a custom class.</li> <li><code>showCancelButton</code> and <code>showConfirmButton</code> are no longer needed. Instead, you can set <code>buttons: true</code> to show both buttons, or <code>buttons: false</code> to hide all buttons. By default, only the confirm button is shown.</li> <li><code>confirmButtonText</code> and <code>cancelButtonText</code> are no longer needed. Instead, you can set <code>button: "foo"</code> to set the text on the confirm button to "foo", or <code>buttons: ["foo", "bar"]</code> to set the text on the cancel button to "foo" and the text on the confirm button to "bar".</li> <li><code>confirmButtonColor</code> is no longer used. Instead, you should specify all stylistic changes through CSS. As a useful shorthand, you can set <code>dangerMode: true</code> to make the confirm button red. Otherwise, you can specify a class in the <a href="/docs#buttons">button object</a>.</li> <li><code>closeOnConfirm</code> and <code>closeOnCancel</code> are no longer used. Instead, you can set the <code>closeModal</code> parameter in the <a href="/docs#buttons">button options</a>.</li> <li><code>showLoaderOnConfirm</code> is no longer necessary. Your button will automatically show a loding animation when its <code>closeModal</code> parameter is set to <code>false</code>.</li> <li><code>animation</code> has been deprecated. All stylistic changes can instead be applied through CSS and a custom modal class.</li> <li><code>type: "input"</code>, <code>inputType</code>, <code>inputValue</code> and <code>inputPlaceholder</code> have all been replaced with the <code>content</code> option. You can either specify <code>content: "input"</code> to get the default options, or you can customize it further using the <a href="/docs#content">content object</a>.</li> <li><code>html</code> is no longer used. Instead use the <a href="/docs#content">content object</a>.</li> <li><code>allowEscapeKey</code> is now <code>closeOnEsc</code> for clarity.</li> <li><code>allowClickOutside</code> is now <code>closeOnClickOutside</code> for clarity.</li> </ul> </div> </div> <div id="app"></div> <footer> <p> Hand-crafted with <span class="love-icon"></span> by <a href="http://tristanedwards.me"> Tristan Edwards </a> + <a href="https://github.com/t4t5/sweetalert/graphs/contributors"> contributors </a> </p> </footer> <script src="/assets/js/index.js"></script> </body> </html>