Sweet alert download file

We've already seen how we can set the text on the confirm button using button: "Aww yiss! If we also want to show and customize the cancel button , we can instead set buttons to an array of strings , where the first value is the cancel button's text and the second one is the confirm button's text:.

If you want one of the buttons to just have their default text, you can set the value to true instead of a string:. So what if you need more than just a cancel and a confirm button? Don't worry, SweetAlert's got you covered! By specifying an object for buttons , you can set exactly as many buttons as you like, and specify the value that they resolve to when they're clicked! Below is an example of using fetch to search for artists on the iTunes API.

Note that we're using content: "input" in order to both show an input-field and retrieve its value when the user clicks the confirm button:. 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 content option. We're going to use React 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! 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 swal function's content option to render it as an unstyled element.

The only code that's specific to SweetAlert is the swal. The rest is just basic React and JavaScript. While the method documented above for creating more advanced modal designs works, it gets quite tedious to manually create nested DOM nodes. That's why we've also made it easy to integrate your favourite template library into SweetAlert, using the SweetAlert Transformer.

After that, it's easy. The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: " warning ", " error ", " success " and " info".

You can also set it as " input " to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function. If set to true , a "Cancel"-button will be shown, which the user can click on to dismiss the modal. Make sure you set a timer or set allowOutsideClick to true when using this, in order not to annoy the user. Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK".

Set to false if you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert.

If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height. If set to true, will not escape title and text parameters. Set to false if you're worried about XSS attacks. If set to false , the modal's animation will be disabled.

Possible string values : pop default when animation set to true , slide-from-top , slide-from-bottom.